No way to ignore certain utilities for a set of theme keys
What version of Tailwind CSS are you using?
For example: v4.1.7
What build tool (or framework if it abstracts the build tool) are you using?
For example: Tailwind CLI
What version of Node.js are you using?
For example: v24.0.0
What browser are you using?
For example: N/A
What operating system are you using?
For example: N/A
Reproduction URL
https://play.tailwindcss.com/JW4vmJMRW5?file=css
Describe your issue
The map that disambiguates theme keys is not user-modifiable and does not take into account JS plugin theme keys either. This results in things like a custom text-stoke-* utility also producing font-size properties when they shouldn't.
Basically, given this:
@import "tailwindcss";
@theme {
--text-stroke-red: red;
}
@utility text-stroke-* {
--text-stroke: --value(--text-stroke-*);
}
There's no mechanism for the user to say "I know font-size utilities match on --text-* but --text-stroke-* shouldn't be included in that".
We can maybe do this automatically for JS plugins / configs. Doing this for CSS authored theme keys will be more complicated as there's no object structure that can be relied upon there.
See this discord discussion where this originated from: https://discord.com/channels/486935104384532500/1371289133254971404
@thecrypticace I would want to take this issue up to solve this i have a solid solution.
Hi! Can you assign this issue to me? I have a PR ready that implements a solution.
Proposed Solution:
- Auto-detect JS plugin theme keys and exclude them from existing utility patterns
- Add
@excludedirective for CSS theme keys:@exclude text-stroke from text - Build exclusion map during compilation to prevent incorrect pattern matching
This fixes the --text-stroke-* → font-size collision while maintaining backward compatibility.