[v4] How to define a functional utility with slash notation?

[hazae41]

I want to make a simple utility that defines a text color depending on dark mode but keeps the given opacity

@utility text-default/* {
  color: color-mix(in oklab, var(--color-black) --value(percentage), transparent);
  
  @variant dark {
    color: color-mix(in oklab, var(--color-white) --value(percentage), transparent);
  }
}

It fails with this message

Error: `@utility text-default*` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.

When digging the code it's clear that the Regex doesn't support it

tailwindcss/packages/tailwindcss/src/utilities.ts

Line 28 in a8c54ac

const IS_VALID_FUNCTIONAL_UTILITY_NAME = /^-?[a-z][a-zA-Z0-9/%._-]*-\*$/

Is there a way to do what I want to achieve?

[royduin]

It seems like having a modifier defined will activate this functionality: https://tailwindcss.com/docs/adding-custom-styles#modifiers, related: #16167

<div class="text-default">text-default</div>
<div class="text-default/50">text-default/50</div>
<hr>
<div class="text-blue">text-blue</div>
<div class="text-blue/50">text-blue/50</div>

@import "tailwindcss";

@theme {
  --default: red;
  --blue: blue;
}

@utility text-* {
  --alpha: calc(--modifier(integer) * 1%);
  color: --alpha(--value(--*, [color]) / var(--alpha, 100%));
}

Demo: https://play.tailwindcss.com/kB5wRTM7Ty?file=css

[royduin]

But it only seems te work with a utility that accepts an argument, without it it's not working:

<div class="text">text</div>
<div class="text/50">text/50</div>

@import "tailwindcss";

@utility text {
  --alpha: calc(--modifier(integer) * 1%);
  color: --alpha(red / var(--alpha, 100%));
}

Demo: https://play.tailwindcss.com/ECphsE1vzA?file=css