Tailwind CSS IntelliSense support for theme variables defined via Uniwind @layer theme and @variant

[DiegoSerra]

Hi Uniwind team 👋

I have a question regarding compatibility with the Tailwind CSS IntelliSense extension and theme variables defined using Uniwind’s @layer theme and @variant.

Specifically, I’m trying to define semantic color tokens like this:

:root {
  --primary: #fa6b61;
  --primary-1000: #d52b1e;
}

@layer theme {
  @variant light: {
    --color-primary: var(--primary);
  }

  @variant dark: {
    --color-primary: var(--primary-1000);
  }
}

This works correctly at runtime, but Tailwind CSS IntelliSense does not recognize utilities like:

bg-primary
text-primary
border-primary

as mapping to the defined color values.

My question is:

Is there a way to configure Uniwind so that Tailwind CSS IntelliSense recognizes these semantic colors? (it works without multiple themes by defining it in @theme)

For example, even if IntelliSense only resolves one default theme (e.g., light mode), it would already be extremely helpful if:

bg-primary → #fa6b61

were recognized by IntelliSense.

The goal is to avoid duplicating color definitions in both:

• Uniwind theme variables (@layer theme)
• and Tailwind config (tailwind.config.js or similar)

since that would introduce redundancy and potential inconsistencies.

---

Questions:

1. Is IntelliSense support for @layer theme variables planned?
2. Is there a recommended pattern to make semantic tokens work with IntelliSense without duplicating definitions?
3. Are there any workarounds currently recommended?

[Brentlok]

Hi, in the documentation for custom themes there's an example how to do this. You need to add your @variant colors to @layer theme { : root { not directly to @layer theme

After your app is built we're recreating the uniwind.css file (@import "uniwind") with an empty variables so it is correctly working with tailwind intellisense

Sometimes the editor doesn't immediately pick up changes in css files that are inside node_modules, so it's worth trying reloading your IDE after adding a new css variable

[DiegoSerra]

Sorry, when I gave the example, I did it incorrectly. I have it like this:

:root {
  --primary: #fa6b61;
  --primary-1000: #d52b1e;
}

@layer theme {
  :root {
    @variant light: {
      --color-primary: var(--primary);
    }

    @variant dark: {
      --color-primary: var(--primary-1000);
    }
  }
}

However, when I place the cursor on bg-primary, I get:

Keep in mind that I need to have previously defined variables with the base colors that I will later use in the variants. That is why I cannot put the corresponding hex/ohcl color in the @variant, so I need to put it in :root beforehand so that the variable exists.

[Brentlok]

So what's the issue then? It is working as intended

[DiegoSerra]

In the image it should give background-color: var(--color-primary) /* #fa6b61 */ instead of "unset"

[Brentlok]

There's a different value of this color between the themes. It can't display both values so that's why it displays "unset"

[DiegoSerra]

So it's not possible to make it work with variant, and I understand that this will be a limitation on the part of Tailwind CSS Intellisense, right? Or is there any workaround to achieve this?

[Brentlok]

It depends on what do you mean by "make it work with variant" it already generates classes with "unset" as a placeholder values

We have three options:

• display all variant values, which I believe is impossible with current tailwind intellisense
• display value from one variant, but then the question is which one should we display? The first one declared, always display light, or mayb something else?
• display "unset" or some other kind of placeholder because variant CSS variables can take multiple values. That's the way we went with