It would be good to define alias values within --value(...)

[rozsazoltan]

Solution

The idea is good, but it's already implemented - I overlooked it and insisted on using the specific --text-* prefix for the token. See more below from wongjn.

Successfully example with unique token

https://play.tailwindcss.com/yFKAHzZV4T?file=css

@theme {
  --transition-underline-offset: text-underline-offset;
  --transition-decoration-color: text-decoration-color;
}

@utility transition-* {
  transition-property: --value(--transition-*);
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

Wrong example with --text-* token

https://play.tailwindcss.com/VXOB3Hz359?file=css

Original

I want to create two utilities, for example, named transition-underline-offset and transition-decoration-color, but I want to be able to access them only with a text- prefix to avoid duplication.

Right now, to achieve this, it looks like this:

• https://play.tailwindcss.com/iiiq3t7AFI?file=css

<div class="transition-underline-offset ...">
  Transition text-underline-offset
</div>

<div class="transition-decoration-color ...">
  Transition text-decoration-color
</div>

@utility transition-underline-offset {
  transition-property: text-underline-offset;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

@utility transition-decoration-color {
  transition-property: text-decoration-color;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

If I try to shorten the code a bit, I don't have the option to add the text- prefix before them:

• https://play.tailwindcss.com/XNSaEkhjeZ?file=css

<div class="transition-text-underline-offset ...">
  Transition text-underline-offset by too long class-name
</div>

<div class="transition-text-decoration-color ...">
  Transition text-decoration-color by too long class-name
</div>

@utility transition-* {
  transition-property: --value('text-underline-offset', 'text-decoration-color');
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

Something like this would look good:

<div class="transition-underline-offset ...">
  Transition text-underline-offset
</div>

<div class="transition-decoration-color ...">
  Transition text-decoration-color
</div>

@utility transition-* {
  transition-property: --merge('text-', --value('underline-offset', 'decoration-color'));
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

[wongjn]

You could use theme tokens for now: https://play.tailwindcss.com/khWiS05Ktz?file=css

[rozsazoltan]

Ah, thanks. I tried with --text-*, but it was a dumb idea not to test it with a noname prefix. ...then I just gave up trying.

I'll leave the incorrect example here anyway; interestingly, text-link already works (it didn't during the first test because I hadn't created it yet); but I rebuilt it just to be sure, since I was convinced it hadn't worked for me:
https://play.tailwindcss.com/lODMEnIVL4?file=css

Looking back, using the text token was a bit unreasonable - it was probably just a quick choice because of the related property.

[rozsazoltan]

I quickly finished what I wanted to do.

https://play.tailwindcss.com/f2witdkjuv?file=css

@theme {
  --transition-underline-offset: text-underline-offset;
  --transition-decoration-color: text-decoration-color;
  --transition-link: color, opacity, text-underline-offset, text-decoration-color;
}

@utility transition-* {
  transition-property: --value(--transition-*);
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

Now can use transition-underline-offset, transition-decoration-color and transition-link utilities.