[v4] Default theme is not disabled when nested under a selector

[artaommahe]

What version of Tailwind CSS are you using?

v4.1.4

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.3.5

What version of Node.js are you using?

v20.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

• open https://play.tailwindcss.com/2Hixf2cxNi?file=css
• see that text-amber-200 is included despite --*: initial

it works correct when theme/utilities are not nested under a .new_design selector.

Describe your issue

Im expecting --*: initial to disable all (/most) of default tailwind classes, but for some reason it doesn't work in case of nesting the theme under a selector.
We have two different tailwind themes on the same page together (old and new design) while slowly migrating to the newest one. To resolve same-tokens conflicts we're nesting the new design theme under a .new_design selector (important: '.new_design' in js-based config). While migrating to css-based configuration we've noticed that default tailwind theme is not disabled in such setup.

[wongjn]

@theme is a "global" concept within the Tailwind CSS. So when you @import "tailwindcss/theme" layer(theme);, it re-imports the default theme tokens from Tailwind, hence --color-amber-200 is redefined, and thus text-amber-200 works. In this sense, Tailwind does not take any parent selector or context into account, since it all goes into the global design token data.

You can put the first @theme in the selector and it will be inside it but it will break any class names relying on the CSS variables since it produces the CSS rule:

.new_design {
  @layer theme {
    :root, :host {

Which is non-sensical since :root can't really be a child of other elements.

[artaommahe]

looks like completely removing @import "tailwindcss/theme" layer(theme) fixes my issue. Any downsides of having it not imported?

[artaommahe]

btw

You can put the first @theme in the selector and it will be inside it but it will break any class names relying on the CSS variables since it produces the CSS rule:

that's basically my other questions about having an option to set tailwind css variables not on the :root but under a specific selector #18108