Awesome
<h1 align='center'> <p align='center'> <sup><em><a href="https://windicss.org/integrations/vite.html#design-in-devtools">"Design in DevTools"</a> for <a href="https://tailwindcss.com/">Tailwind CSS</a> ⚡️</em></sup> </p> </h1> <p align='center'> <a href='https://www.npmjs.com/package/tailwindcss-webpack-plugin'> <img src='https://img.shields.io/npm/v/tailwindcss-webpack-plugin/latest.svg'> </a> <a href='https://npmjs.com/package/tailwindcss-webpack-plugin'> <img src='https://img.shields.io/npm/l/tailwindcss-webpack-plugin' > </a>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 ✨
<p align="center"> <a href="https://www.youtube.com/watch?v=fceKcPPMuJk"> <img src="https://i.imgur.com/2hdNeTnl.png"> </a> </p> <br/> <p align="center"> tailwind-css-webpack-plugin example - Click to Watch!" </p>Features
- 🛠️ 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!
Quick Start
| tailwindcss-vite-plugin | Tailwind CSS "Design in Devtools" for Vite |
| tailwindcss-webpack-plugin | Tailwind CSS "Design in Devtools" for Webpack |