{"id":22435,"library":"tailwindcss-vite-plugin","title":"Tailwind CSS Vite Plugin","description":"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.","status":"active","version":"0.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/await-ovo/tailwindcss-webpack-plugin","tags":["javascript","Tailwind CSS","tailwind","Design in Devtools","Vite Plugin","typescript"],"install":[{"cmd":"npm install tailwindcss-vite-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add tailwindcss-vite-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add tailwindcss-vite-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; required to use the plugin","package":"vite","optional":false}],"imports":[{"note":"ESM-only; TypeScript types included. If using CommonJS, use dynamic import() or switch to ESM.","wrong":"const TailwindCSSVitePlugin = require('tailwindcss-vite-plugin')","symbol":"TailwindCSSVitePlugin","correct":"import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'"},{"note":"Default export is not provided; must use named import.","wrong":"import TailwindCSSVitePlugin from 'tailwindcss-vite-plugin'","symbol":"TailwindCSSVitePlugin","correct":"import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'"},{"note":"Only named export exists; no namespace or default.","wrong":"import * as TailwindCSSVitePlugin from 'tailwindcss-vite-plugin'","symbol":"TailwindCSSVitePlugin as default","correct":"import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    TailwindCSSVitePlugin(),\n  ],\n});","lang":"typescript","description":"Shows how to add the TailwindCSSVitePlugin to a Vite project with React, enabling Tailwind DevTools integration."},"warnings":[{"fix":"Add import '_tailwind-devtools_.js' to your main entry file (e.g., App.tsx).","message":"When using custom entry (entry option), you must manually import '_tailwind-devtools_.js' in your code.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Review GitHub releases for migration steps.","message":"Version 0.0.7 may have breaking changes from 0.0.6; check changelog.","severity":"breaking","affected_versions":">=0.0.7"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev tailwindcss-vite-plugin' or 'pnpm add -D tailwindcss-vite-plugin'.","cause":"Package not installed or missing from node_modules.","error":"ERROR: Cannot find module 'tailwindcss-vite-plugin'"},{"fix":"Use 'import { TailwindCSSVitePlugin } from 'tailwindcss-vite-plugin''.","cause":"Incorrect import (default instead of named) or using require() in ESM context.","error":"TypeError: TailwindCSSVitePlugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}