Tailwind generates inappropriate class names for custom colors

[sxdav]

Discussed in #13547

^{Originally posted by sxdav April 18, 2024}
I'm trying to add css vars aliases to the config like that:

const config: Config = { theme: { colors: { '-bg-primary': 'var(--bg-primary)' } } }

Idea is to use them as bg--bg-primary, similar to css vars syntax. But tailwind generates a -bg-bg-primary class which contains background-color: var(--bg-primary);, instead of bg--bg-primary which does not seems like an expected behavior.

[thecrypticace]

Hey! So the behavior you're seeing is partially due to backwards compatability with configs from Tailwind v2. In v2, before the JIT, you could specify the negative version of a utility by prefixing the value with a -. And the convention is that the class name for the negative version of a utility starts with a - character. So you could have a value of spacing.-3 and it would generate a class of -m-3. In v3, we generate the negative version of supported utilities automatically but preserved the ability to specify the negative version of a utility in the config for backwards compatibility purposes. The way this works is on a more global level so even though a "negative" color utility doesn't really make sense we still allow users to generate it — again for backwards compatability purposes.

In v4, none of this is an issue and the class you've written is actually possible with the following theme config:

@theme {
  --colors--bg-primary: #f00;
}

In general in v4 negative utilities:

• Are supported on a per-plugin basis (meaing -bg-bg-primary will never exist)
• Are always generated with the calc({value} * -1) syntax automatically
• Don't have a way to specify sepearate values for negative utilities in the theme thus side stepping potential confusion when a negative utility has a different, unrelated value than the positive one (usually because of typos).
• Has CSS variables as a first-class citizen so such theme definitions are often less necessary because we generate utility definitions that use CSS variables.

The fact that Tailwind v3 generates anything for the class bg--bg-primary is a bit of a longstanding bug. But it's not that it generates with the wrong class name. It's that it shouldn't generate any CSS at all. Given that we're all in on v4 right now i'm not sure if this will be fixed in a v3.x.x release but if it is it'll be fixed as to not generate CSS.