How to install Vite 8 with TailwindCSS v4

Vite 8 is still in beta and not stable. Until a stable release is available, it's not customary to provide official support for it. For the beta, you can force-attach plugins with incompatible versions at your own risk, like this:

• https://stackoverflow.com/a/79677733/15167500

package.json

{
  "dependencies": {
    "vite": "8.0.0-beta.11",
    "tailwindcss": "^4",
    "@tailwindcss/vite": "^4"
  },
  "overrides": {
    "@tailwindcss/vite": {
      "vite": "8.0.0-beta.11"
    }
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

In theory, there shouldn't be many changes, but if there are significant changes in the Vite API, it can break @tailwindcss/vite until the API is fixed (I haven't checked the API list yet). In that case, the issue can be worked around by using Vite with PostCSS.

package.json

{
  "dependencies": {
    "vite": "8.0.0-beta.11",
    "postcss": "^8",
    "tailwindcss": "^4",
    "@tailwindcss/postcss": "^4"
  },
}

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/postcss'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
})

Vite 8 breaking change: use LightningCSS instead of ESBuild

An important breaking change is that TailwindCSS uses LightningCSS under the hood, while Vite 8 also uses LightningCSS but with a different configuration (LightningCSS is configurable). TailwindCSS will have to address this issue and make its LightningCSS settings exportable so they can be applied in Vite. Until then, it's recommended to stick with the stable release.

• https://stackoverflow.com/q/79829663/15167500
• https://rozsazoltan.vercel.app/docs/tailwindcss/upgrade-guide#rolldown-vite-compatibility
• Stabilizing Lightning CSS vitejs/vite#13835
• https://vite.dev/guide/features#lightning-css

vite.config.ts

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  build: {
    cssMinify: 'esbuild', // default: 'lightningcss'
  },
  plugins: [
    tailwindcss(),
  ],
});