Tailwind as A Vite Plugin

Loading "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

🐨 In the

vite.config.ts

, import the @tailwindcss/vite plugin and register it in the plugins array.

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.

🐨 Delete

postcss.config.mjs

Update the CSS file

Currently, the

src/styles/tailwind.css

uses @tailwind PostCSS directives.

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';

🐨 Update the