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

[CryberCorp]

up

[rozsazoltan]

Warning

The --text-* namespace is reserved for the text-* utility, so the hint may unexpectedly provide three extra suggestions. For this reason, it’s advisable not to use the --text-* namespace, but instead something like --trim-*. Read more: #17634 (reply in thread)

Tip

Use this:

@theme {
  --texttrim-both: trim-both; /* --texttrim or --trim or --ttrim or anything */
  --texttrim-start: trim-start;
  --texttrim-end: trim-end;
}
@utility text-trim-* {
  text-box-trim: --value(--texttrim-*, "none");
}

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

(Original answer)

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

[bengry]

And can use @theme inline instead of @theme.

I wrote the reply quickly and didn't have time to come up with a sensible and appropriate namespace prefix.

I think the @theme can be entirely omitted here for just this:

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

...

I'm not sure if the CSS variables give any real benefit here.

By the way, if you're using tailwind-merge, it would conflict with things like text-red-200 by default, so it also needs to be extended:

import { extendTailwindMerge } from "tailwind-merge";

export const twMerge = extendTailwindMerge<"text-box-trim">({
  extend: {
    // See https://github.com/dcastil/tailwind-merge/discussions/323#discussioncomment-7336816
    // for explanation of how and why this is configured this way.
    classGroups: {
      "text-box-trim": [{ "text-trim": ["none", "start", "end", "both"] }],
    },
  },
});

[rozsazoltan]

The goal here isn't the variable. For example, with @theme inline it skips the variable entirely - try testing it. But if you don't want to add mappings, then it indeed doesn't make sense.

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

text-trim-none        // use "none" name for "none" value
text-trim-trim-both   // use "trim-both" name for "trim-both" value
text-trim-trim-start  // use "trim-start" name for "trim-start" value
text-trim-trim-end    // use "trim-end" name for "trim-end" value

The problem in your case is that this way your class becomes text-trim-trim-both, which is a bit ugly - I think that's why I originally wrote it using a variable. But with @theme inline, Tailwind CSS omits the variable in the generated CSS. With namespaces, I have the option to give a value a unique name.

@theme inline { /* could use @theme inline if you don't want variables in generated CSS */
  --custom-namespace-both: trim-both;
  --custom-namespace-start: trim-start;
  --custom-namespace-end: trim-end;
}

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

text-trim-none   // use "none" name for "none" value
text-trim-both   // use "both" name for "trim-both" value
text-trim-start  // use "start" name for "trim-start" value
text-trim-end    // use "end" name for "trim-end" value

(For the sake of the example, I generalized the namespace name (--custom-namespace-), so I'm using -* to indicate the name - both in this case - and then the value, which is trim-both.)

[bengry]

The goal here isn't the variable. For example, with @theme inline it skips the variable entirely - try testing it. But if you don't want to add mappings, then it indeed doesn't make sense.

WDYM by "mappings"? Since you have to list all possible values anyway, does it matter if it's within the --value() or as part of @theme { }? Although I guess that's not what you meant.

[rozsazoltan]

I meant a name - value (e.g. both - trim-both) pair. I expanded on it a bit with a later edit. In your case, this is why trim ends up being repeated.

[bengry]

I meant a name - value (e.g. both - trim-both) pair. I expanded on it a bit with a later edit. In your case, this is why trim ends up being repeated.

Just saw the edit, thanks for the thorough explanation. Much appreciated.

[michaelcummings12]

There's a tailwind plugin you can install instead of defining custom classes yourself!!

https://www.npmjs.com/package/tailwindcss-text-box-trim

[rozsazoltan]

It's not too much effort to define it ourselves; I think it's better to avoid introducing yet another dependency if possible. If this were something more complex than the anchor, I'd agree that it would be necessary.

• https://github.com/michaelcummings12/tailwindcss-text-box-trim/blob/main/index.css#L1-L21
• Add support for `text-box` (`text-box-trim`, `text-box-edge`) CSS properties. #17634 (comment)

[michaelcummings12]

I totally get what you're saying.

For me, I want to have these classes available in multiple different projects. I am always a fan of DRYing when possible. I prefer installing a lightweight package that makes the classes available to me vs having to copy-paste the same code over and over again.

Just boils down to personal preference. Plus, it gave me a reason to publish my first npm package!!! 🚀