Tailwind CSS Vite Plugin

0.0.7 verified Mon Apr 27 auth: no javascript

A Vite plugin that integrates Tailwind CSS with the browser's DevTools for a visual design experience. Current stable version is 0.0.7. The plugin allows editing Tailwind classes directly in Chrome/Firefox DevTools, providing instant feedback. It automatically injects @tailwind directives and supports custom entry points. Released under MIT, it is actively maintained but still in early development. Alternatives include @tailwindcss/vite (official) and PostCSS-based setups; this plugin differentiates by focusing on DevTools integration.

Common errors

error ERROR: Cannot find module 'tailwindcss-vite-plugin' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install --save-dev tailwindcss-vite-plugin' or 'pnpm add -D tailwindcss-vite-plugin'.

error TypeError: TailwindCSSVitePlugin is not a function ↓

cause Incorrect import (default instead of named) or using require() in ESM context.

fix

Use 'import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin''.

Warnings

gotcha When using custom entry (entry option), you must manually import '_tailwind-devtools_.js' in your code. ↓

fix Add import '_tailwind-devtools_.js' to your main entry file (e.g., App.tsx).

breaking Version 0.0.7 may have breaking changes from 0.0.6; check changelog. ↓

fix Review GitHub releases for migration steps.

Install

npm install tailwindcss-vite-plugin

yarn add tailwindcss-vite-plugin

pnpm add tailwindcss-vite-plugin

Imports

TailwindCSSVitePlugin

wrong

const TailwindCSSVitePlugin = require('tailwindcss-vite-plugin')

correct

import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'

ESM-only; TypeScript types included. If using CommonJS, use dynamic import() or switch to ESM.

TailwindCSSVitePlugin

wrong

import TailwindCSSVitePlugin from 'tailwindcss-vite-plugin'

correct

import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'

Default export is not provided; must use named import.

TailwindCSSVitePlugin as default

wrong

import * as TailwindCSSVitePlugin from 'tailwindcss-vite-plugin'

correct

import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'

Only named export exists; no namespace or default.

Quickstart

Shows how to add the TailwindCSSVitePlugin to a Vite project with React, enabling Tailwind DevTools integration.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin';

export default defineConfig({
  plugins: [
    react(),
    TailwindCSSVitePlugin(),
  ],
});