[v4] including @tailwindcss/vite in plugins breaks css modules in production

[abhishiv]

What version of Tailwind CSS are you using?

4.0.0-beta.1

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

@tailwindcss/[email protected] with [email protected]

What version of Node.js are you using?

v20.5.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

Following vite.config.js makes vite generate incorrect css class name for css modules

  plugins: [tailwindcss()],
  css: {
    postcss: {},
    modules: {
      generateScopedName: "[local]__[hash:base64:5]",
    },
  },

Maybe related, but I see following error in production

[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

[philipp-spiess]

Hey @abhishiv! Thanks for the report. Do you mind uploading a reproduction repository for us to check out? I was just testing your config in our Vite playground and it seems to work as expected for both dev and production builds: