Support dynamically constructed class names

[SabziDev]

Support dynamically constructed class names

It would be very useful if Tailwind could detect simple dynamically constructed class names at build time.

For example:

const breakpoint = "lg";
const className = `max-${breakpoint}:overflow-hidden`;

Currently, Tailwind may not generate "max-lg:overflow-hidden" because the full class name does not appear literally in the source.

I understand that fully supporting arbitrary dynamic strings may be impossible or expensive, but supporting simple statically analyzable cases like this could be very useful.

const breakpoint = "lg";
// → max-lg:overflow-hidden

Would this be technically feasible for a future Tailwind version?

[cooldev227]

Of course, Yes. But there is an important distinction between what Tailwind could implement and what fits its current extraction architecture.

Tailwind currently treats source files largely as plain text rather than executing or semantically analyzing JavaScript. Its documentation explicitly says that string interpolation/concatenation is not understood, so:

const breakpoint = "lg";
const className = `max-${breakpoint}:overflow-hidden`;

doesn't expose the complete max-lg:overflow-hidden token to the scanner.