Allow @theme blocks to contain selectors

[candidia]

There is a strategy popularized by Pico CSS where your styles target HTML element types instead of having to apply them to every instance of an element or make wrapper components.

For example, Pico does something like:

:root {
    --color: red;
    color: var(--color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    --color: blue;
    color: var(--color);
}

button {
    --color: green;
}

button,
[type=submit],
[type=reset],
[type=button],
[type=file]::file-selector-button,
[role=button] {
    color: var(--color);
}

This idea of semantic theming is also used in shadcn/ui; however it doesn't take it as far as Pico, as you still need to apply your classes everywhere.

Tailwind v4 allows specifying theme variables like:

@theme {
    --color: red;
}

However, if you want to dynamically style semantic elements by modifying the CSS variable according to a selector like in Pico in combination with Tailwind, we run into problems.

Trying to put the selectors inside @theme errors:

@theme {
    h1 {
        --color: red;
    }
}

with

[plugin:@tailwindcss/vite:generate:serve] `@theme` blocks must only contain custom properties or `@keyframes`.

  @theme {
>   h1 {
>     --color: red;
>   }
  }

My only other idea for this is changing the order of wrapping:

h1 {
    @theme {
        --color: red;
    }
    color: var(--color);
}

button {
    @theme {
        --color: blue;
    }
    color: var(--color);
}

This doesn't give an error, but the color that was last defined always applies everywhere. Here, an h1 would be blue as well.

Please provide a solution for this case.

[adamwathan]

Hey! Sorry if I'm not understanding, but can you not just write this?

h1 {
  --color: red;
}

Why does @theme need to be involved here at all?

Here's a working example:

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

[candidia]

Wow thanks so much! I guess I didn't understand the purpose of @theme. Looks like it just "registers" the variable, but the variable can still be modified outside its context. I thought Tailwind wouldn't pick up anything outside it.

[MhrrmliEltac]

how set container sizes tailwindcss v4.0?

[w3debugger]

I might be missing something, but perhaps he was attempting to use:

@layer base {
  h1 {
    --color: red;
  }
}