await-ovo / tailwindcss-webpack-plugin

"Design in DevTools" for Tailwind CSS
MIT License
36 stars 0 forks source link

"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