How to use tailwindcss/vite with vite 8

[charliez0]

How to use tailwindcss/vite with vite 8

[rozsazoltan]

From v4.2.2 onward

On March 12, 2026, Vite 8 was officially released.

• https://vite.dev/blog/announcing-vite8#vite-8-0-is-out

From v4.2.2 released on March 18, 2026, official support for Vite 8 has been introduced, among other improvements, so you only need to start with v4.2.2.

• https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.2

package.json

{
  "dependencies": {
    "vite": "^8",
    "tailwindcss": "^4.2.2",
    "@tailwindcss/vite": "^4.2.2"
  },
}

vite.config.ts

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

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

v4.2.1 or earlier versions

Vite 8 with @tailwindcss/vite

I haven't verified it, but if the Vite API changes, the behavior of @tailwindcss/vite may change, become unpredictable, or break. For that reason, I'd treat it with some caution. In practice, however, it's the same installation step mentioned in the documentation, with one small override using a forced install to push dependencies that aren't compatible with Vite 8 alongside Vite 8.

package.json

{
  "dependencies": {
    "vite": "^8",
    "tailwindcss": "^4",
    "@tailwindcss/vite": "^4"
  },
  "overrides": {
    "@tailwindcss/vite": {
      "vite": "^8"
    }
  }
}

vite.config.ts

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

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

References:

• tailwindlabs/tailwindcss discussion #19624
• Installing the TailwindCSS Vite plugin with Vite 7 - peer vite@"^5.2.0 || ^6" from @tailwindcss/vite@4.1

Vite 8 with @tailwindcss/postcss

The Vite plugin is much more efficient, but in case of API breakages, @tailwindcss/postcss can be used as a fallback.

package.json

{
  "dependencies": {
    "vite": "^8",
    "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(),
      ],
    },
  },
})

---

Source: https://stackoverflow.com/a/79879526/15167500

[MrBns]

its stable now. How to use ?

[wongjn]

A stable @tailwindcss/vite version that supports Vite 8 isn't out yet, but you can try the insiders tag:

npm install tailwindcss@insiders @tailwindcss/vite@insiders

[filpgc]

how long yet for a stable release?

[van-sprundel]

Bump, I couldn't find anywhere when releases are scheduled.

[rozsazoltan]

Yeah, from https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.2

[van-sprundel]

Awesome, cheers!

[sydneyvaughn75-ops]

Is there a close replacement to this

…

On Sat, Mar 14, 2026, 5:32 AM Justin Wong ***@***.***> wrote: A stable @tailwindcss/vite version that supports Vite 8 isn't out yet, but you can try the insiders tag: npm install ***@***.*** @***@***.*** — Reply to this email directly, view it on GitHub <#19624 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7HZNK52ZLM5BAXDV5X462T4QUYKTAVCNFSM6AAAAACTN6DZJKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMJSHEZDGMA> . You are receiving this because you are subscribed to this thread.Message ID: <tailwindlabs/tailwindcss/repo-discussions/19624/comments/16129230@ github.com>