Functional utility does not support wildcard without hyphen prefix

[sntran]

What version of Tailwind CSS are you using?

v4.1.11

Reproduction URL

https://play.tailwindcss.com/dVTUCMxH7i

Describe your issue

Error on the col-start-c* functional utility with the following message:

@utility col-start-c* defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.

First, the error message is not right, since the utility name both is alphanumeric and starts with a lowercase letter.

Secondly, I would expect it to be valid.

[thecrypticace]

This is by design. A functional utility is determined by its "root" and its "value". The root portion is matched literally and is separated from the value by a -. This is how all Tailwind CSS's own utilities work as well (though they can have defaults where there is no value and as such also no -, this is how border works for instance)

We could probably improve the error message here but the first half is correct — it's an invalid utility name. I'll see if I can tweak that tomorrow.

[sntran]

Thanks! I saw the tests and utility-*-name is also invalid. Is there technical limitation that forces the * to be at the end?

[thecrypticace]

Yes, utilities are matched by checking prefixes:

tailwindcss/packages/tailwindcss/src/candidate.ts

Lines 747 to 786 in 298ad08

	function* findRoots(input: string, exists: (input: string) => boolean): Iterable<Root> {
	// If there is an exact match, then that's the root.
	if (exists(input)) {
	yield [input, null]
	}
	// Otherwise test every permutation of the input by iteratively removing
	// everything after the last dash.
	let idx = input.lastIndexOf('-')
	// Determine the root and value by testing permutations of the incoming input.
	//
	// In case of a candidate like `bg-red-500`, this looks like:
	//
	// `bg-red-500` -> No match
	// `bg-red` -> No match
	// `bg` -> Match
	while (idx > 0) {
	let maybeRoot = input.slice(0, idx)
	if (exists(maybeRoot)) {
	let root: Root = [maybeRoot, input.slice(idx + 1)]
	// If the leftover value is an empty string, it means that the value is an
	// invalid named value, e.g.: `bg-`. This makes the candidate invalid and we
	// can skip any further parsing.
	if (root[1] === '') break
	yield root
	}
	idx = input.lastIndexOf('-', idx - 1)
	}
	// Try '@' variant after permutations. This allows things like `@max` of `@max-foo-bar`
	// to match before looking for `@`.
	if (input[0] === '@' && exists('@')) {
	yield ['@', input.slice(1)]
	}
	}

So when we encounter a utility like bg-red-500 these three options are tried:

• bg-red-500: does an exact match exist?
• bg-red, 500: does a bg-red utility exist and produce a result for the value 500?
• bg, red-500: does a bg utility exist and produce a result for the value red-500?

This is pretty well baked into core and also in how our IntelliSense extension works.

[sntran]

Sorry for resurrecting this. I have to work with WordPress and Tailwind. WordPress generates a lot of classes like has-primary-1-color, has-primary-1-background-color, has-xl-font-size, etc.., in which "primary-1" is the name of the color.

In order to get a single CSS output file, I would need to make Tailwind recognize those utilities.

Having ability to use wildcard in the middle would help a lot instead of writing all those utilities by hand.

@utility has-*-color {
  color: --value(--color-*);
}
```

I hope Tailwind team reconsider the approach to add some more flexibility.