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