[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).