"Design in DevTools" for Tailwind CSS ⚡️
[Tailwind CSS](https://tailwindcss.com/) v3.0 has [Just-in-Time](https://tailwindcss.com/blog/tailwindcss-v3#just-in-time-all-the-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](https://windicss.org/integrations/webpack.html), and the name "Design in devtool"s was also learned from the [Windi CSS](https://windicss.org/integrations/webpack.html) documentation, thanks to the amazing [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss) and [webpack-plugin-windicss](https://github.com/windicss/windicss-webpack-plugin) packages ✨
tailwind-css-webpack-plugin example - Click to Watch!"
## Features - 🛠️ Zero configuration to start - ⚡️ ["Design in DevTools"](https://windicss.org/integrations/vite.html#design-in-devtools) mode - 🎨 [Visualizing your Tailwind CSS configuration file](https://github.com/rogden/tailwind-config-viewer#tailwind-config-viewer). - ⚙️ Auto-inject [@tailwind](https://tailwindcss.com/docs/functions-and-directives#tailwind) directives - 📦 No need to add tailwind to the PostCSS plugins - 🔥 Bundler-agnostic: [Webpack](https://webpack.js.org/),[Vite](https://vitejs.dev/), etc! - 🚀 Framework-agnostic: [Vue CLI](https://cli.vuejs.org/index.html), [Next.js](https://nextjs.org/), [Create React App](https://create-react-app.dev/), etc! ## Quick Start | | | | --------------------------------------------------- | ----------------------------------------------------------------------------------------- | | [tailwindcss-vite-plugin](./packages/vite-plugin) | Tailwind CSS "Design in Devtools" for Vite | | [tailwindcss-webpack-plugin](./packages/webpack-plugin) | Tailwind CSS "Design in Devtools" for Webpack | ## License [MIT License](./LICENSE)Made with ❤️ by await-ovo
Enjoy!
[npm-version-src]: https://img.shields.io/npm/v/talwindcss-webpack-plugin/latest.svg [npm-version-href]: https://npmjs.com/package/tailwindcss-webpack-plugin [license-src]: https://img.shields.io/npm/l/tailwindcss-webpack-plugin [license-href]: https://npmjs.com/package/tailwindcss-webpack-plugin