[v4] Tailwind bundles unused css variables, bloating up the css

[GiyoMoon]

What version of Tailwind CSS are you using?

v4.0.2

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

Playground

What version of Node.js are you using?

Playground version

What browser are you using?

Chromium

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/

Delete the entire html file, switch between v4 and v3 and compare the size of the generated css file.

Describe your issue

Tailwind v4.0 ships all css variables of the default theme, even if they aren't being used. This bloats up the css by a good amount. Default sizes with no classes used in the html:

• v3 - 1.16kb
• v4 - 4.01kb
  The size increased by 345%. Is there a way to strip of unused variables without having to "reset" the default theme and define it manually as described in here?

[Pilaton]

Yes, the optimization of the assembly in version 4 is not at all pleasing.
The CSS code has become much more weighty.

You can compare these two example styles for font-weight from the final bundle:

v3

.font-bold {
  font-weight: 700
}
.font-extrabold {
  font-weight: 800
}
.font-light {
  font-weight: 300
}
.font-medium {
  font-weight: 500
}
.font-normal {
  font-weight: 400
}
.font-semibold {
  font-weight: 600
}

v4

@layer theme {
  :host,:root {
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
  }
}

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold)
}
.font-extrabold {
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold)
}
.font-light {
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light)
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium)
}
.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal)
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold)
}

[skratchdot]

there are also differences in using the vite-plugin vs postcss. i'm not sure if there is an open issue for bringing the v4 vite plugin into parity w/ the v4 postcss usage.

https://github.com/skratchdot/tailwind-v4-example-sizes

CSS Output (tailwindcss v4.0.4)

css file	size	gzip size	build time
v3-postcss-merge	4.88 kB	1.44 kB	609ms
v3-postcss-no-merge	4.88 kB	1.44 kB	600ms
v4-postcss-merge	17.99 kB	5.26 kB	537ms
v4-postcss-no-merge	17.99 kB	5.26 kB	515ms
v4-vite-merge	19.77 kB	5.62 kB	429ms
v4-vite-no-merge	19.77 kB	5.62 kB	413ms

EDIT: (after #16211 we are seeing much smaller build sizes)!

CSS Output (tailwindcss v4.0.5)

css file	size	gzip size	build time
v3-postcss-merge	4.88 kB	1.44 kB	597ms
v3-postcss-no-merge	4.88 kB	1.44 kB	589ms
v4-postcss-merge	4.49 kB	1.43 kB	748ms
v4-postcss-no-merge	4.49 kB	1.43 kB	530ms
v4-vite-merge	6.37 kB	1.85 kB	441ms
v4-vite-no-merge	6.37 kB	1.85 kB	401ms

[RobinMalfait]

Hey!

This has been fixed by #16211 and will be available in the next release.

[GiyoMoon]

Thank you! Awesome work 🎉

[skratchdot]

Thank you @RobinMalfait ! Great work! I updated my comment above with updated build sizes (after v4.0.5 was published). Things are looking much better. 🙌 🎉