d15d92ca60
## Problem Tailwind 4.2.0 introduced stricter `@utility` name validation (#19524) that rejects functional utility names where the root ends with a dash after stripping the `-*` suffix. This breaks a valid and useful naming pattern where a double dash separates the CSS property from a value scale: ```css @utility border--* { border-color: --value(--color-border-*, [color]); } ``` This produces: `border--0`, `border--1`, `border--2`, etc. The error message is: > `@utility border--*` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter. ## Why this pattern matters The double-dash convention creates a clear visual grammar in class names. The first segment names the CSS property, and the double dash separates it from the semantic scale value. In a dense className string like `border border--0 background--0 content--4`, the scale values (0, 0, 4) are immediately scannable, distinct from the single-dash property names around them. This pattern is actively used in production design systems for semantic color scales (background, content, border, shadow) with values from 0-10. ## Why the restriction is unnecessary The validation comment states the concern is that `border--*` could match the bare class `border-` when using default values. However, this edge case is already handled: 1. **`findRoots` in `candidate.ts`** (line 887) already rejects empty values: `if (root[1] === '') break` 2. **The Oxide scanner** already extracts double-dash candidates correctly, as confirmed by existing tests: `("items--center", vec!["items--center"])` The candidate parser and scanner both handle this case. The validation was an overcorrection. ## Changes - Removed the trailing-dash check from `isValidFunctionalUtilityName` in `utilities.ts` - Updated the existing unit test from `['foo--*', false]` to `['foo--*', true]` - Added an integration test proving `@utility border--*` compiles correctly with theme values ## Test results All 4121 tests pass across the tailwindcss package, including the new integration test. --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com> |
||
|---|---|---|
| .. | ||
| src | ||
| tests | ||
| index.css | ||
| package.json | ||
| playwright.config.ts | ||
| preflight.css | ||
| README.md | ||
| theme.css | ||
| tsconfig.json | ||
| tsup.config.ts | ||
| utilities.css | ||
| vitest.config.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or feature ideas:
Discuss Tailwind CSS on GitHub
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.