Option to disable generation of @theme css custom properties

[universse]

I have a variable that's set up like this

[data-theme='red'] {
  --text-color-primary: red;
}

[data-theme='blue'] {
  --text-color-primary: blue;
}

[data-theme='red'] {
  --text-color-primary: green;
}

To use this custom property as a utility class .text-primary, I have the following @theme config:

@theme {
  --text-color-primary: var(--text-color-primary);
}

Note how the custom property names are the same, because of similar naming conventions.

Here's the generated output CSS, which I want to disable, since it's redundant for my use case.

:root, :host {
  --text-color-primary: var(--text-color-primary);
}

What's the recommended way to handle this?

[wongjn]

You can't remove it via Tailwind alone but you could have one of the themes as the "default" case in @theme. Red for example:

@theme {
  --text-color-primary: green;
}

* {
  [data-theme='blue'] & {
    --text-color-primary: blue;
  }
}

Otherwise, you can process the CSS after Tailwind has built it to remove the obsolete declaration.

You could try using @theme inline like:

@theme inline {
  --text-color-primary: var(--text-color-primary);
}

Nope doesn't work, since it needs to reference itself var(--text-color-primary);, which causes it to be output in the @theme block: https://play.tailwindcss.com/rBjCuH2r5s?file=css

[universse]

the css custom property is still getting generated https://play.tailwindcss.com/iFnGKQ6NVQ?file=css

Edit: just saw your update

[wongjn]

Yea, when using @theme inline, it needs to reference itself var(--text-color-primary) which causes it to be output in the @theme block. Works if you change the CSS variable name though: https://play.tailwindcss.com/iIrR3biHul?file=css

[universse]

gotcha. changing css variable names is not something I can do right now. will have to find a workaround. thanks for looking into it.