leading- and tracking- Utilities Not Applying in Tailwind CSS v4

[marwan-boudiab]

I am encountering an issue where leading- (line-height) and tracking- (letter-spacing) utility classes, when used via @apply in a custom component class, do not seem to apply their respective CSS properties. The text content does not reflect the intended line-height or letter-spacing. Other utility classes like text-size and font-bold from the same @apply directive are working as expected.

[wongjn]

Consider providing a Tailwind Play or a git repo that reproduces the issue and we can take a look for you.

[marwan-boudiab]

The exact same style was working before migrating to the v4 https://play.tailwindcss.com/2xiB02WV7o?file=css

[wongjn]

Seems to be working as expected for me:

• line-height is var(--leading-tight) or 1.25 for any screen size.
• letter-spacing is -0.5px for small viewports. For md and greater, it is -1px.

It may be worth noting that the expectation for line-height is different in v3:

• line-height is var(--leading-tight) or 1.25 for smallest screen sizes.
• For sm breakpoint and above, it follows the line-height per the text-<size> utilities.

In other words, in v4, the leading-tight takes precendence over any of the line-height inside the text-<size> utilities. While in v3, line-height inside the text-<size> utilities that have variants take precedence.

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

If you can't/don't want to use the class names directly in templates, you could consider using regular CSS instead. This means you have more control over your intentions. You'd use var() or --theme() with @variant as needed to reference your theme tokens.

[marwan-boudiab]

Thanks so much for the detailed explanation. That makes perfect sense and clarifies the behavior I was seeing. I appreciate you taking the time to explain it so clearly.