Tailwind as A Vite Plugin
Integrating Tailwind V4 with Vite
๐จโ๐ผ Tailwind CSS v4 will still be available as a PostCSS plugin (as it is today), but there's also a new option to use it as a Vite plugin.
๐จโ๐ผ Since we're working in a Vite app already... let's give it a try!
Update dependencies
๐งโโ๏ธ I've gone ahead and installed the alpha version of Tailwind CSS v4 in this app:
- "tailwindcss": "^3.4.0",
+ "tailwindcss": "^4.0.0-alpha.14",
๐งโโ๏ธ I have also installed the Tailwind Vite plugin:
"devDependencies": {
+ "@tailwindcss/vite": "^4.0.0-alpha.14",
"@types/node": "^20.9.1",
๐งโโ๏ธ Finally, I've removed both the
postcss and autoprefixer dependencies โย we don't need those anymore!- "autoprefixer": "^10.4.16",
- "postcss": "^8.4.31",
Update the Tailwind Intellisense vscode extension
๐ฐ To get all the Tailwind Intellisense goodness in vscode, you need to switch to the pre-release version of the extension in vscode:
Configure the Vite plugin
Remove the PostCSS config file
The Vite plugin version of Tailwind CSS v4 is not a PostCSS plugin. We've also removed PostCSS from our dependencies, so let's remove the PostCSS config file.
Update the CSS file
BUT โ we're not using PostCSS anymore! Instead, we're going to use a regular CSS import, and import the Tailwind CSS syles like so:
@import 'tailwindcss';