[v4] Unnecessary Variables Causing Build Size Increase

[Harshkt214]

Tech Details

• TailwindCSS: 4.0.0-beta.2
• Node: v22
• Runtime: Bun v1
• Environment: React (18.3) + Vite + TailwindCSS/Vite (4.0.0-beta.2)
• Operating System: Windows 10

Project URL

Project URL

Describe Your Issue

The problem I am facing is at build time. In previous versions, TailwindCSS removed unused styles during the CSS build process, making the globals.css file as small as possible. However, in v4, I noticed that the globals.css file size is ~17KB (Without using any utility classes).

Upon checking, I found many design tokens in :root{} that I don't even use in the project. I also tried this method, but it is time-consuming. There are many tokens, some of which I want to use and others I don't, and manually keeping track of them is challenging.

[tobimori]

Duplicate of #15136 15136

[philipp-spiess]

@Harshkt214 Hey! What you're seeing is indeed intended, we do now emit all design tokens as CSS variables so you're able to use and modify them even if the class is not used at runtime. This does slightly increase CSS bundle size but the increase is going to be limited to your theme config as well.

If you don't need most of the tokens and want to remove the output, you can eject from the default config. To do this, you'd first split the main Tailwind CSS require into its three pieces:

- @import "tailwindcss";
+ @layer theme, base, components, utilities;
+ 
+ @import 'tailwindcss/theme.css' layer(theme);
+ @import 'tailwindcss/preflight.css' layer(base);
+ @import 'tailwindcss/utilities.css' layer(utilities);

Now, what you can do is fork our default theme from here: https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/theme.css, adjust it to your likings, and replace it inside your project:

  @layer theme, base, components, utilities;

- @import 'tailwindcss/theme.css' layer(theme);
+ @import './theme.css' layer(theme);
  @import 'tailwindcss/preflight.css' layer(base);
  @import 'tailwindcss/utilities.css' layer(utilities);

This might be more ergonomic than having to manually unset all namespaces.

[philipp-spiess]

Let me close this one as well and we can continue discussion in #15136.