Kill CSS Bloat: Variable-Mode Utilities

[shabranali786]

Every text-* font-size value (text-[20px], md:text-[30px], lg:text-[clamp(...)]) generates separate font-size: rules → duplicate CSS.

Proposal (Variable-Mode for all properties)

Writers: text-* utilities only set custom properties:
--tw-font-size (base), --tw-md-font-size, --tw-lg-font-size, --tw-xl-font-size, …

Reader (one time): compiler auto-attaches a single .text-size-var class to the element once if any font-size utility is present on that element.

No md:text-size-var, no lg:text-size-var. Just one .text-size-var.

Reader CSS handles breakpoints via fallback chain so it picks the most specific var if provided, else falls back:

/* Reader: attached once per element */
.text-size-var { font-size: var(--tw-font-size); }

/* Breakpoint-aware reader (fallback chain) */
@media (min-width: 768px) {
.text-size-var {
font-size: var(--tw-md-font-size, var(--tw-font-size));
}
}
@media (min-width: 1024px) {
.text-size-var {
font-size: var(--tw-lg-font-size, var(--tw-md-font-size, var(--tw-font-size)));
}
}
@media (min-width: 1280px) {
.text-size-var {
font-size: var(--tw-xl-font-size,
var(--tw-lg-font-size,
var(--tw-md-font-size,
var(--tw-font-size))));
}
}

Users writes (simple):

Heading

Compiler output (auto-attach only once):

Heading

DevTools (if inline-var mode is enabled):

Why this is nice

• Only one apply class per element; no responsive apply variants needed.
• Writers flip variables at each breakpoint; the single reader picks the right one via fallbacks.
• DX unchanged: users keep using text-*.
• Works with clamp()/calc()/var().