Tailwind CSS v3.0 has Just-in-Time mode enabled by default, which brings a huge performance improvement, but since classes are generated on demand based on your source code, adding some unused classes directly in DevTools is now impossible, which can be a bit annoying.
Fortunately, this plugin can help us try out any tailwind utilities in DevTools, and it's important to note that this plugin was inspired by Windi CSS, and the name "Design in devtool"s was also learned from the Windi CSS documentation, thanks to the amazing vite-plugin-windicss and webpack-plugin-windicss packages ✨
tailwind-css-webpack-plugin example - Click to Watch!"
- 🛠️ Zero configuration to start
- ⚡️ "Design in DevTools" mode
- 🎨 Visualizing your Tailwind CSS configuration file.
- ⚙️ Auto-inject @tailwind directives
- 📦 No need to add tailwind to the PostCSS plugins
- 🔥 Bundler-agnostic: Webpack,Vite, etc!
- 🚀 Framework-agnostic: Vue CLI, Next.js, Create React App, etc!
| tailwindcss-vite-plugin | Tailwind CSS "Design in Devtools" for Vite |
| tailwindcss-webpack-plugin | Tailwind CSS "Design in Devtools" for Webpack |
Made with ❤️ by await-ovo
Enjoy!