tailwindcss
tailwindcss copied to clipboard
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