Skip to content

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

Open
@thecrypticace

Description

@thecrypticace

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions