https://github.com/await-ovo/tailwindcss-webpack-plugin

"Design in DevTools" for Tailwind CSS
https://github.com/await-ovo/tailwindcss-webpack-plugin

Last synced: 3 months ago
JSON representation

"Design in DevTools" for Tailwind CSS

• Host: GitHub
• URL: https://github.com/await-ovo/tailwindcss-webpack-plugin
• Owner: await-ovo
• License: mit
• Created: 2022-04-27T17:48:25.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-03T03:46:59.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T09:16:20.936Z (3 months ago)
• Language: TypeScript
• Size: 812 KB
• Stars: 36
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-tailwindcss - tailwindcss-webpack-plugin - Out-of-the-box Tailwind CSS, supports "Design in DevTools" mode and visualizes Tailwind CSS configuration. (Tools)

README

        





"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