v4 larger base output

[kasperaamodt]

What version of Tailwind CSS are you using?

v4.0.0-beta.2

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

N/A

What version of Node.js are you using?

N/A

What browser are you using?

N/A

What operating system are you using?

N/A

Reproduction URL

https://play.tailwindcss.com/an51ZGYAGV

Describe your issue

Is the v4 base output supposed to be 3.5 times larger than the v3 base output? Just switch between v3 and v4 to see the size difference. 1.13kb (v3) vs 3.94kb (v4).

[tobimori]

This is because it always includes all theme variables as CSS variables, so that you can access them during runtime.

[MorganMcmillan]

Is there any way to opt out of this behavior? For me it's 18kb minified and optimized.

[Harshkt214]

I also encountered the same issue, which seems to be fixable using Tailwind CSS v4 Beta: Overriding the Default Theme. However, the problem is that we have to remove the variables manually, which I consider not an ideal approach.

[philipp-spiess]

Hey all! What you're seeing is indeed intended right now, 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 either remove namespaces from the default theme or eject from the default completely.

To do the latter, 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 in case you really only need a very thing config.

Is that something that would work for all your use cases?

[kasperaamodt]

Forgive me if this is a stupid question, but will that break things? If I detach the entire theme, will bg-blue-500 or text-slate-300 have no meaning?

[philipp-spiess]

@kasperaamodt Yep, if you unregister the colors these utilities won't work anymore! My idea is to inline only the variables you also need so you don't end up with unused variables.

[kasperaamodt]

I see. So v3 had automatic pickup of used vars and v4 does not? Or v3 didn't have vars to track maybe? Manual tracking of used vars can get messy quick. But I guess its a small tradeoff compared to all the new cool stuff! v4 with the Vite setup is really good.

[philipp-spiess]

@kasperaamodt v3 did not use CSS variables at all. Instead, every utility would contain the value of the variable that you set via the JavaScript configuration with no way for doing any changes at runtime.

[kasperaamodt]

I see. Well I will see what I end up doing.

At the moment, I'm creating static sites. Maybe there is a way to scan the code during the build, and generate a theme with the correct vars. Thank you!

[ksmsk]

Hey all! What you're seeing is indeed intended right now, 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.

@philipp-spiess

I'm struggling to understand why I’d want to modify a CSS variable at runtime if it’s not being used in the first place. Could you provide an example scenario where this behavior would actually be useful?