Additional customization for --text-* theme variables

[clearasvodka]

With ability to customize --text-* theme variables and provide line-height, letter-spacing, and font-weight values alongside with a font size, would be nice to add text-transform utility.

@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;
}

Will be very handy if you already heave typography styles in your Design System with uppercase style (happens quite often) and wanted to use it just by triggering your custom class.

For example,

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

And have this as a result:

#### 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.