Support vite@8 by @tailwindcss/vite

[AviVahl]

What version of Tailwind CSS are you using?

4.2.1

What build tool (or framework if it abstracts the build tool) are you using?

vite@8.0.0

What version of Node.js are you using?

24.14.0

What browser are you using?

Irrelevant

What operating system are you using?

Irrelevant

Reproduction

mkdir vite-tailwindcss-test
cd vite-tailwindcss-test
npm init -y
npm i vite
npm i tailwindcss @tailwindcss/vite

results in:

npm error Could not resolve dependency:
npm error peer vite@"^5.2.0 || ^6 || ^7" from @tailwindcss/vite@4.2.1
npm error node_modules/@tailwindcss/vite

Describe your issue

vite@8 is out. plugin announces peerDep up to 7.x

[KardoseR]

eta on this?

[rozsazoltan]

Warning

It's important to note that this is still very much in a testing phase, so you shouldn't build production code on top of it. TailwindCSS generates production code using specific LightningCSS settings, while Vite also uses LightningCSS in both development and production, but with completely different configurations, which can lead to unexpected compiled CSS. Read more: #19789 (comment)

Until the support arrives, you can force the merge despite the complications.

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

Reference:

• Installing the TailwindCSS Vite plugin with Vite 8 - peer vite@"^5.2.0 || ^6 || ^7" from @tailwindcss/vite@4

[rozsazoltan]

Previously, when I tested the Vite 8 beta with TailwindCSS v4, I ran into several complications. I believe the @tailwindcss/vite plugin needs to expose its own LightningCSS configuration so that it can also be applied to the LightningCSS instance executed by Vite, since differing feature sets can cause anomalies.

To avoid fixing this for now, you can temporarily switch back to esbuild in the cssMinify setting.

Known breaking change: using Lightning CSS 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.

vite.config.ts

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

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

References:

• https://vite.dev/guide/features#lightning-css
• OKLCH colors are converted to LAB colors when I start using Rolldown-Vite instead of Vite

Hmm. I remember that I also had to change the css.transformer option, but I didn't document it properly in the Stack Overflow answer.

• https://vitejs.dev/config/shared-options#css-transformer

vite.config.ts

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

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

And the settings from @tailwindcss/vite need to be forwarded to css.lightningcss so that, when the above two options are set to lightningcss, the CSS is generated with the same configuration that TailwindCSS expects.

• https://vitejs.dev/config/shared-options#css-lightningcss

Read more: https://stackoverflow.com/a/79879526/15167500

[RobinMalfait]

@rozsazoltan what issues did you run into that required you to use these settings:

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

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

[rozsazoltan]

@RobinMalfait Originally, someone else also had the problem with Beta Vite 8. I copied the issue from a Discord server to Stack Overflow so it would be available publicly.

• OKLCH colors are converted to LAB colors when I start using Rolldown-Vite instead of Vite

Back then, it seemed that the LightningCSS compilation run by Vite was the last step causing the generated CSS to produce a different result. Since the thread was about Vite 8 stable, I thought I'd share the experience. I still need to test myself whether the issue persists in Vite 8 stable.

[RobinMalfait]

Interesting, yeah I don't see any of those issues on my end. The oklch is not converted to a lab color for example.

Somebody opened a separate issue here: #19792, so if you run into any issues feel free to comment on that one.

If you use @tailwindcss/vite@insiders then you should have proper Vite 8 support as well.