How to create custom utility classes and override them for different themes without confusion due to namespaces (Tailwind 4)

[gmoniava]

Imagine I want to have several custom utility classes - such as button-default-background - and also override them during dark mode (because I suppose this is one approach to create apps which support themes).

Now I could do it in following way based on tailwind 4 docs:

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-button-default-background: #eb6bd8;
}

@layer base {
  @variant dark {
    --color-button-default-background: #8e0d7a;
  }
}

But it would generate utilities like bg-button-default-background and text-button-default-background right? However having value named: text-button-default-background seems a bit strange (usage of text and background in the same word) isn't it?

So what is the best way to achieve what I want using tailwind 4 primitives?

[wongjn]

You could consider using theme token namespace for background-color only, --background-color:

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --background-color-button-default: #eb6bd8;
}

@layer base {
  * {
    @variant dark {
      --background-color-button-default: #8e0d7a;
    }
  }
}

<div class="bg-button-default">

https://play.tailwindcss.com/WQ9x09RIZh?file=css

[gmoniava]

Don't you think this information should be in the docs? I think other people might be also interested, no? Can you help me maybe open an issue here?

[wongjn]

Yes, I think this information should be in the documentation.

You should be able to open an issue; I think you don't need my assistance in that matter. Also, there is already a draft PR at tailwindlabs/tailwindcss.com#2178 for this.

[gmoniava]

Do you think I should open a new issue or link this thread in the PR link you provided above? That PR was a bit confusing to me because it was talking about some CustomizingYourThemeColors component which I am not aware of.

[wongjn]

I don't know what you should do. Here is the CustomizingYourThemeColors component.

[gmoniava]

Ok, well thanks. I opened the issue. I was suggesting if you could help because you seem to have "collaborator" badge so I thought it would get more attention say if you opened it. But anyway. Let's see what happens.