Tailwindcss 4 comes with too much defaults when all I need is utilities (migration from v3)

[vdegenne]

Below is compiled tailwind 3 from one of my recent app:

As you can see, tailwindcss only kept the strict minimum only the css that my application needs and it's compressed into a few kilobits, great!

Now, I haven't changed anything in my app, I just migrated to tailwindcss 4 right, and here's the compiled code (spoilers: it might hurt your eyes):

Yes Right! it's like a dozen times bigger... and I am not sure to understand the reasons because a lot of this code seems unecessary (lots of colors vars I don't even use.)

Update: I understand now why is this code injected in final build, I just wish there were an easy way to prevent that for the people that might just want to use TW4 for the layouts. In TW3 it was as easy as writting @tailwind utilities only.

[wongjn]

As per the documentation:

This makes it easy to reference all of your design tokens in any of your custom CSS or inline styles.

[vdegenne]

I am not asking what are css variables for. I am familiar with those. But what if I don't need them? I mainly use Tailwindcss to layout my app (in tailwindcss 3 I just needed the utilities module)

[wongjn]

There's no API to remove the ones you don't need. You'd need to manually remove them either by:

• Selectively removing the ones you don't need.
• Disabling the default @theme and defining the only ones you need (optionally via inline so they don't show up either).

[vdegenne]

Ok I understand but how do you selectively remove them, or how do you disable the default theme without losing code detection?

[wongjn]

Selective removal:

@import "tailwindcss";

@theme {
  --color-blue-*: initial;
  --color-red-600: initial;
  …
}

Disabling the default @theme:

@import "tailwindcss";

@theme {
  --*: initial;

  --spacing: 4px;

  --font-body: Inter, sans-serif;
  --color-lagoon: oklch(0.72 0.11 221.19);
  --color-coral: oklch(0.74 0.17 40.24);
  --color-driftwood: oklch(0.79 0.06 74.59);
  --color-tide: oklch(0.49 0.08 205.88);
  --color-dusk: oklch(0.82 0.15 72.09);
  …
}

[vdegenne]

oh wow ok... That was pretty straightforward, thanks for your help!

[iquito]

I am also not a fan of the amount of variables that are defined in v4 and no options to remove the unused ones, as it increased my CSS (going from v3 to v4) from 22kb to 38kb, most of it because of the CSS variables. My current solution is to use https://github.com/tomasklaen/postcss-prune-var , which removes unused CSS variables, but Tailwind could probably do a better job itself. I hope optimization/smaller CSS amount becomes a bigger priority now that v4 is out.

[vdegenne]

I thought I found the solution of importing only @import 'tailwindcss/utilities' but this put tailwindcss to sleep and it will not detect the classes I'm using through my code.
So yes for now I think that's bummer...

[vdegenne]

I found an opt-in solution to this by selectively disabling all predefined features (Thanks @wongjn to show me how).

@import 'tailwindcss';

@theme {
	--animate-*: initial;
	--aspect-*: initial;
	--blur-*: initial;
	--breakpoint-*: initial;
	--color-*: initial;
	--container-*: initial;
	--default-*: initial;
	--drop-*: initial;
	--ease-*: initial;
	--font-*: initial;
	--font-weight-*: initial;
	--inset-shadow-*: initial;
	--leading-*: initial;
	--perspective-*: initial;
	--radius-*: initial;
	--shadow-*: initial;
	--text-*: initial;
	--tracking-*: initial;
}

Now during development if you ever need a set, let say text sizes you would comment --text-*: initial to make the classes available in your code.

[vdegenne]

Also if you don't want the base layer:

@import 'tailwindcss/theme';
@import 'tailwindcss/utilities';

[wongjn]

FYI this removes the Preflight too.

[vdegenne]

Yes this is what I meant by "base".

[wongjn]

Ah OK, the base layer and preflight are distinct things - the Preflight styles go inside the base layer.

[vdegenne]

Ok thanks for the notice, If I ever found some issues to that solution I'll make sure to report back here.