Text transform uppercase first letter only

[victorocna]

I was writing some tutorials for my team on text transformation (with CSS only) and I noticed something missing. Currently Tailwind has uppercase, lowercase and capitalize classes very well documented here, but nothing that just transforms only the first letter to uppercase.

How about a new class like uppercase-first or first-letter to do just that? I currently have this custom CSS class in every project that "extends" Tailwind's text transformation utilities.

.first-letter::first-letter {
  text-transform: uppercase;
}

Cheers!

[adamwathan]

Kinda like this? :)

https://play.tailwindcss.com/GVOsrIO8jN

[victorocna]

Exactly right! Is this an existing class in Tailwind? I searched the docs and found nothing.

And what a great class name, I wish I thought of that.

[adamwathan]

Yeah it's new to the JIT engine, you can do anything with the first-letter, so for example:

<div class="first-letter:text-red-500 first-letter:font-bold first-letter:uppercase">

https://tailwindcss.com/docs/just-in-time-mode#pseudo-element-variants

[juanjinario]

Why this combination "line-clamp-2 first-letter:uppercase" does not work?

[oldravian]

first-letter:uppercase is not working inside span tag
<span class="first-letter:uppercase">hello there</span>

[wongjn]

As per the MDN docs (emphasis mine):

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block container, but only when not preceded by other content (such as images or inline tables).

<span> elements are inline by default, hence not a block container and hence the ::first-letter pseudo-element not working in this case. You could apply display: block via the block class as an example to make it a block container and thus get the ::first-letter to work: https://play.tailwindcss.com/BpHgKu6ZQn

[kelvinsekx]

Or better still add an "inline-block" class

[Durga-Zoca]

First-letter:uppercase not working on safari
className={w-[90px] text-base lowercase first-letter:uppercase md:text-lg mid:text-base ${textColor} text-justify}