add small caps font variant

[ianstormtaylor]

Just noticed that there are font variant settings for numerals, and there's the classic uppercase text transform, but it would be nice to have support for small caps.

Specifically:

@layer utilities {
  .small-caps {
    font-variant: all-small-caps;
  }
}

These are nicer typographically than doing regular uppercase letterforms in fonts that support them.

[mainej]

I'd be interested in this too, but...

1. It would be easier to combine font variants if the utility used the font-variant-caps property instead of the font-variant shorthand.
2. In my use case I need font-variant: small-caps, which converts lowercase letters to small caps, not font-variant: all-small-caps, which converts both upper and lower case letters to small caps.

So, if this gets added, I'd advocate for following the precedent established by font-variant-numeric, meaning class names like .small-caps, .all-small-caps, .titling-caps, etc.

[raptoria]

+1

[vargatam77]

+1. i was just seeking out this exact thing. seems like i will have to solve it myself

[qadzek]

That would be a nice addition. In the meantime, I'm using the following:

<div className="text-2xl [font-variant:small-caps]">

[Austin1serb]

I love that they added the ability to basically write any CSS inline like this. Great job Tailwind

[foxeddev]

+1