Tailwind V4 not compiling with dynamic values in class name

[nickythorne]

We have various places in the codebase where we use template literals to build a dynamic classname, which substitutes dynamic values at runtime to form the final value for the arbitrary class name.

Example:

className={cn(
    `fixed data-[] mt-[50px] overflow-auto shadow-[rgba(0,0,0,0.13)_0px_2.7px_9px,rgba(0,0,0,0.09)_0px_9.4px_24px,rgba(0,0,0,0.08)_0px_21.8px_43px]`,
    {
        [`w-[${getSize(props.size)}]`]: props.origin === 'left' || props.origin === 'right',
        [`h-[${getSize(props.size)}]`]: props.origin ===  'bottom' || props.origin === 'top',
    },
)}

This was working fine in V3, but now these areas fail to compile:

web:dev: Parsing css source code failed
web:dev:   1238 |   }
web:dev:   1239 |   .h-\[\$\{getSize\(props\.size\)\}\] {
web:dev: > 1240 |     height: ${getSize(props.size)};

Any ideas?

[wongjn]

I don't think this ever "worked" in v3 on its own. You may have had a safelist or the same classes used elsewhere (see https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names or https://v3.tailwindcss.com/docs/content-configuration#dynamic-class-names).

What's changed is that v4 is more unforgiving of this incorrect usage, see #15853 (comment).

[nickythorne]

Thanks for the reply. I can see this confirmed in the documentation now regarding dynamic arbitrary values. We'll update our code to change these to using the style directly. Thanks.