What version of Tailwind CSS are you using?

v4

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

vite 6

What version of Node.js are you using?

v20.11.1

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/maxsalven/tw-vite-bug

Describe your issue

In the attached repro is a very basic vite app which uses tailwind-merge:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { twMerge } from "tailwind-merge";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <div className={twMerge("text-2xl")}></div>
  </StrictMode>
);

It uses the vite plugin:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [tailwindcss(), react()],
});

The built CSS file is 32.8KB
dist/assets/index-BAs4IohO.css 32.81 kB │ gzip: 7.35 kB

and includes unused classes:

  .stacked-fractions {
    --tw-numeric-fraction: stacked-fractions;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
      var(--tw-numeric-figure) var(--tw-numeric-spacing)
      var(--tw-numeric-fraction);
  }

If we now remove the tailwindcss plugin:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
});

and run npm run build again:
dist/assets/index-B89DnZA7.css 17.80 kB │ gzip: 5.19 kB

The CSS file is half the size and the unused classes are gone. The used classes are still in there:

@layer utilities {
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
}