[v4] Tailwind generates a lot of unused styles

[filipsobol]

Steps to reproduce

1. Create a fresh Vite project.
2. Add Tailwind following the Installation guide.
3. Add @import "tailwindcss";.
4. Do not use any Tailwind classes in the code.
5. Run the npm run build command.

Expected result

The generated CSS file should contain only essential styles, such as CSS resets, with a file size of approximately 2 KB.

Actual result

The generated CSS file includes a significant number of unused styles, with a total size of 21.8 KB.

• ~360 CSS variables,
• utilities styles,
• @keyframes rules,
• @property rules.

Workaround

PurgeCSS can remove most of the unused styles, except for @property rules:

// postcss.config.js

import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';

export default {
  plugins: [
    purgeCSSPlugin( {
      content: [
        './index.html',
        './src/**/*'
      ],
      fontFace: true,
      keyframes: true,
      variables: true
    } )
  ]
}

With this configuration, the final CSS file size is reduced to approximately 4 KB.

[wongjn]

Efforts are underway to clear unused CSS variables and @keyframes, see:

• Only expose used CSS variables #16211
• Revert: Only expose used CSS variables #16403

Also, as per #16211 (comment):

The @property is already only used as part of used utilities, so if you don't use utilities that make use of @property they won't show up.

[unional]

@wongjn is there a way to control that? I do want to generate all CSS variables with source(none) so that the CSS variables are defined and can be loaded as a shared CSS, and then in MFEs they reference these variables (each MFEs has their unique prefix to avoid conflicts).

[wongjn]

Sorry, what are you referring to when you ask if there is any "way to control that"?

[unional]

Sorry, what are you referring to when you ask if there is any "way to control that"?

I mean with the work in #16211 and #16403, want to make sure the generating all CSS variables with source(none) is still possible.

[wongjn]

Yes, consider reading the Always including all variables section in #16211 (assuming the same API would be reimplemented).

[philipp-spiess]

Hey! Thanks for the report. Like @wongjn said that's something that's currently on top of our minds as well and re-land a fix for this very soon!

[peterpeterparker]

Not directly related to this discussion, but since I read the thread many times while debugging our issue, I wanted to share a solution in case it helps someone in the future.

After migrating to Tailwind v4, our application's reproducibility checks started failing. We tried various solutions, including using purge as suggested here, but the root cause of the issue — the reason the bundle randomly ended up with additional Tailwind classes — was how we embedded the lib.

Instead of using a plain CSS @import as described in the documentation, we used an @use Sass rule to avoid the related deprecation warning. While everything appeared to work fine both in development and production builds, this ultimately caused the problem (random additional classes = not reproducible builds). Reverting to @import resolved the issue.

Hope this helps someone down the road!