Font variation settings in tailwindcss v4

[lars-radtke]

Hey there!

I'm currently struggling with getting the CSS proeprty font-variation-settings to work in tailwind v4.

While these settings individually work with no issues:

@utility wght-* {
        font-variation-settings: "wght" --value(integer); 
}

@utility opsz-* {
        font-variation-settings: "opsz" --value(integer); 
}

I have a hard time understanding, how to make them work in conjunction, so that when I write for example

<p className="wght-367 opsz-48">...

that they'll get merged into

font-variation-settings: "wght" 367, "opsz" 48;

I feel like I'm missing some information in the docs where it's described how to achieve these concatenated property values.
Or I'm just plain dumb, that's also a possibility.

[wongjn]

You could consider using CSS variables: https://play.tailwindcss.com/zq2Bvd4g3I?file=css. You may need to fiddle with the @property statements to get it working properly.

[lars-radtke]

I tried playing around with your snippet and actually found a solution, that doesn't require me to write a v3 plugin and import that – thank you so much for your support!

[lars-radtke]

After fiddling around for a little longer, I just so happend to find a solution, that tends to point towards the "I'm just plain dumb" solution: https://play.tailwindcss.com/jZUrbNXT8n?file=css.
(The preview errors at the custom variable, but it works in my repo)

I guess, I couldn't wrap my head around how tailwind's mutating the variable values in the new version!

Next thing for me to figure out is how to limit --value(integer) to specific ranges of numbers (e. g. 300 to 900) and to get my linter to suggest these classes.