Using grouped vars in custom utility

[jacksleight]

The text size utilities can set font size and also line height, making use of the text-*--line-height vars. Is the same thing possible with custom utilities?

I tried this but it doesn't output anything:

@theme {
  --frame-sm--start: 1;
  --frame-sm--end: 2;
  ...
}

@utility frame-* {
  grid-column-start: --value(--frame-*--start);
  grid-column-end: --value(--frame-*--end);
}

Seems like having anything after the asterisk isn't supported?

[wongjn]

The same thing is not possible with custom utilities. You'd have to adjust the theme tokens such that the "name" comes at the end:

@theme {
  --frame-start-sm: 1;
  --frame-end-sm: 2;
  ...
}

@utility frame-* {
  grid-column-start: --value(--frame-start-*);
  grid-column-end: --value(--frame-end-*);
}

[jacksleight]

Ah OK, that's a shame but no big deal to use different naming.

Would be a nice addition.

[RobinMalfait]

It is possible, but the missing piece is that you also need to define --frame-sm on its own.

This is how we define a line-height in the framework:

  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);

Notice how we both have the --text-xs and then the additional information.

So in your case, if you add --frame-sm: …; then it should work as expected, see: https://play.tailwindcss.com/IABpbnYko7?file=css

That said, the fact that you would not be using --frame-sm at all might be a bug 🤔

[jacksleight]

Amazing, thanks!