Add support for text-box (text-box-trim, text-box-edge) CSS properties.

[Malien]

https://developer.mozilla.org/en-US/docs/Web/CSS/text-box
https://caniuse.com/mdn-css_properties_text-box
https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/

The support has landed in Safari 18.2 and Chrome 133.

Allows us to align stuff easily with the ascendants, descendants, baseline, etc.

vs

It degrades gracefully on unsupported browsers (a bit uglier layout in rare-ish circumstances).

It is pretty fresh off the release. There aren't really common ways to use it now. The most common proprety combination I've seen is text-box: trim-both cap

[DhyonKeyllon]

Up

[rozsazoltan]

You can easily declare any utility yourself using @utility. Utilities might be can handled like this:

@theme {
  --text-trim-both: trim-both;
  --text-trim-start: trim-start;
  --text-trim-end: trim-end;
}

@utility text-trim-* {
  text-box-trim: --value(--text-trim-*, "none");
}

@utility text-edge-* {
  text-box-edge: --value(--text-edge-*, "text", "alphabetic", "ideographic", "cap", "ex", [*]);
}

Of course, whether we want to introduce abbreviations depends on the use cases; for example, I would leave out box from the utility name. Edge allows a secondary parameter as well, but this can be handled in arbitrary or supplemented with a modifier.

The text-box property by itself is not a significant feature for TailwindCSS, since having two separate utilities remains much more readable.

References:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box-trim
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box-edge