How do replace @apply when it comes to spacing?

[LanFeusT23]

I've begun updating my project from TW 3 to TW 4.

The most annoying thing is the inability to use @apply inside vue style components without adding @reference "tailwindcss" everywhere.

So with the push to not use @apply I started updating those css rules (which I need because I'm overriding a few 3rd party components which I cannot update the HTML for) to using CSS Variables.

It's easy for @apply text-red-500 I can do color: var(--color-red-500). But how do I deal with spacing such as w-xx or pt-XX?

Is my only solution to do width: calc(var(--spacing) * 60)?! It feels like I should instead be able to do width: var(--width-60) no?

Thanks!

[wongjn]

You can use the --spacing() helper function:

.my-element {
  width: --spacing(60);
}

V4 changed how some of these utilities work, opting to have an infinite spacing scale rather than set values. Thus, in this new system, var(--spacing) is multiplied to give the equivalents of the spacing values in v3.

[LanFeusT23]

Ah dang it, I missed that in the docs! Thank you!