Additional customization for --text-* theme variables

[clearasvodka]

Since we can customize the --text-* theme variables, it would be helpful to also include a text-transform utility alongside existing font-size, line-height, letter-spacing, and font-weight.

@theme {
  --text-subheader: 0.75rem;
  --text-subheader--line-height: 1rem;
  --text-subheader--letter-spacing: 0.25rem;
  --text-subheader--font-weight: 600;
  --text-subheader--text-transform: uppercase;
}

This would be especially useful if your Design System already includes typography styles with uppercase text (which is quite common), allowing you to apply them simply by using a custom class.

For example,

<div class="text-subheader">
  This is subheader.
</div>

And have the result as such:

#### THIS IS SUBHEADER.

[auduongtuan]

I want the same 😂 Any updates on this?

[rozsazoltan]

Although not with a nested key as you'd like, the functionality itself can still be achieved:

• TailwindCSS Playground for text-transform

@import "tailwindcss";

@theme {
  --text-subheader: 0.75rem;
  --text-subheader--line-height: 1rem;
  --text-subheader--letter-spacing: 0.25rem;
  --text-subheader--font-weight: 600;
}

@utility text-subheader {
  text-transform: uppercase;
}

[auduongtuan]

I'm currently using this workaround, but's not perfect as it's not working properly in Tailwind CSS IntelliSense

[rozsazoltan]

Yeah, I tried it. It's definitely bad that it shows two identical classes, but aside from that, it works. I think suggesting two identical classes is illogical here, and it seems more like an IntelliSense bug.