tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

No way to ignore certain utilities for a set of theme keys

Open thecrypticace opened this issue 8 months ago • 2 comments

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 avatar May 21 '25 20:05 thecrypticace

@thecrypticace I would want to take this issue up to solve this i have a solid solution.

ath1614 avatar Nov 12 '25 07:11 ath1614

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 @exclude directive 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.

ath1614 avatar Nov 12 '25 07:11 ath1614