From v4.2.2 onward
On March 12, 2026, Vite 8 was officially released.
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.
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:
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(),
],
},
},
})
