https://github.com/vituum/vite-plugin-tailwindcss
⚡️🎨 Vite plugin for TailwindCSS, adds out of the box support
https://github.com/vituum/vite-plugin-tailwindcss
Last synced: 6 months ago
JSON representation
⚡️🎨 Vite plugin for TailwindCSS, adds out of the box support
- Host: GitHub
- URL: https://github.com/vituum/vite-plugin-tailwindcss
- Owner: vituum
- License: mit
- Created: 2023-06-17T12:16:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-10T12:30:12.000Z (6 months ago)
- Last Synced: 2025-04-10T13:53:00.060Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚡️🎨 ViteTailwindCSS
Adds out of the box support for TailwindCSS v3 with following PostCSS plugins:
* [`postcss-import`](https://www.npmjs.com/package/postcss-import)
* [`postcss-nesting`](https://www.npmjs.com/package/postcss-nesting)
* [`postcss-custom-media`](https://www.npmjs.com/package/postcss-custom-media)
* [`autoprefixer`](https://www.npmjs.com/package/autoprefixer)
For TailwindCSS v4+ use the [official plugin](https://tailwindcss.com/docs/installation/using-vite).
## Basic usage
```js
import tailwindcss from '@vituum/vite-plugin-tailwindcss'
export default {
plugins: [
tailwindcss()
]
}
```
* Don't forget to also add your `tailwind.config.js`, [learn more here](https://v3.tailwindcss.com/docs/guides/vite).
* If you want to add more PostCSS plugins, add them via [css.postcss.plugins](https://vitejs.dev/config/shared-options.html#css-postcss).
* If you want to use `postcss.config.cjs` add `css.postcss: process.cwd()`, PostCSS config and it's plugins will be used instead
Read the [docs](https://vituum.dev/config/plugins-options.html#vituum-postcss) to learn more about plugin options
### Requirements
- [Node.js LTS (16.x)](https://nodejs.org/en/download/)
- [Vite](https://vitejs.dev/)