Base support for text-smaller and text-larger

[andrilla-francis]

Maybe I'm the only one, but in most of my projects I use font-size: smaller; and/or font-size: larger;, neither of which Tailwind offers classes for by default. I don't mind adding them to my globals.css file myself, since it's as simple as

@theme {
  --text-smaller: smaller;
  --text-larger: larger;
}

but I still think they're fairly simple and should be in the base theme.

[cicicdamir]

I agree that these are useful for relative scaling, especially when you want to maintain the hierarchy within nested components. While adding them to @theme is the official v4 way, you can actually make this more "Tailwind-idiomatic" by leveraging the arbitrary value system.

For anyone looking for an immediate "utility-first" fix without touching the CSS file, you can use:

• class="text-[smaller]"
• class="text-[larger]"

However, if we want this in the base theme, the implementation should ideally handle the line-height scale as well to prevent leading issues.

Proposed configuration for your CSS theme block:

@theme {
  --font-size-smaller: smaller;
  --font-size-larger: larger;
}

[andrilla-francis]

Although arbitrary values are useful, they're really intended for those one-off situations, rather than frequent use—and, admittedly, I'm sure I'm a rare case of a designer that uses these relative values frequently. Still, I'm also sure I'm not alone in saying that when Tailwind adds a CSS feature to their base properties, it may be the first time I even heard of it—like the new masking properties—and that makes me far more likely to use it. I even originally used arbitrary classes for these, but switched to add them to my theme, due to the frequent use.

Your CSS theme block is incorrect, and I'm not sure why you included it, when I already did. font-size is handled by the --text-* variable.