Potential CSS variable clashes

[barnabasmolnar]

I was wondering if anyone had a decent solution/workaround for the issue presented in this minimal repro:

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

Assume that your application imports some package that defines its own css variables inside some container. We can reasonably assume that a common naming convention might be --color-whatever. If your host application happens to define a color variant with the same name, you'll end up having a clash as shown in the play snippet above.

I understand this is not a bug or an issue with tailwind itself and what I see is basically the expected behavior.

The generated css is

@layer utilities {
  .text-danger {
    color: var(--color-danger);
  }
}

And --color-danger is orange inside that specific container, so that's what it will resolve to. I understand that. However:

• I don't think this is an outlandish example/occurance
• the devEx is not great because tailwind intellisense won't be able to tell you what text-{variant} actually resolves to in different containers

I'm guessing the cleanest solution would be to have "package" namespace (eg prefix) its variables. That, however, can be rather problematic if said package has tons of variables all over the place, requiring a bigger effort in terms of a refactor. And if you don't have ownership of it, then you're SOL, I guess.

You could of course override these variables inside the container from your host app too:

.package {
  --color-danger: red;
}

But then:

• You have to do it manually and duplicate code, leaving you with no single source of truth.
• You may actually want to leave package's variables intact! Whatever "package" decides danger should resolve to is its own concern and not something we should interfere with. We may, however, want to use the host app's own theme-specific utilities inside the container for whatever reason.

It might sound like a contrived example at first but I think this is at least a legitimate question to raise.

Does anyone have a "good" solution for this? Would be much appreciated!

[wongjn]

You could consider bypassing CSS variables entirely using the inline theme option: https://play.tailwindcss.com/8i3gC4i19V?file=css

[barnabasmolnar]

theme() looks like a winner!

Is there any way to do this inline on the style property somehow, would you happen to know?

.custom p {
  --custom-var: theme(color-danger);
}

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

[wongjn]

Yes. You're just missing the -- prefix: https://play.tailwindcss.com/Nu2M2iFL8q?file=css

[barnabasmolnar]

Ah, sorry, that's not what I meant, I didn't explain clearly. I was thinking of defining a custom variable on the style property of some ancestor element and then using it somewhere down the chain:

<div style={{ "--custom-var": "theme(--color-danger)" }}>

...

<p className="text-(--custom-var)">

As an example in react/jsx. I was wondering if there's a way to use theme to define custom var on the style prop here.

[wongjn]

You'd use an arbitrary property class like:

<div className="[--custom-var:theme(--color-danger)]">
  <p className="text-(--color-danger)">