[v4] can't generate an output file with data-theme attribute

[aromko]

Hey, I'm starting using v4 for out design system where we have multiple themes in it. In v3 it was possible to generate the styles with a fix data-theme like

...
[data-theme="core"] .h-2 {
  height: 0.5rem
}

[data-theme="core"] .h-2\.5 {
  height: 0.625rem
}

[data-theme="core"] .h-2\/3 {
  height: 66.666667%
}
...

So every tailwind class was "prefixed" with data-theme="core" which was defined in the tailwind.config via

important: '[data-theme="core"]'

I thought I could do it now via @variant theme-core (&:where([data-theme="core"] *)); - but with this I need to add everything to our current css and this way I wouldn't cover . And the behavior was also to apply it to all standard tailwind classes automatically.

How could I do it now? - Thanks for help in advance

[wongjn]

Found this in Tailwind's tests:

tailwindcss/packages/tailwindcss/src/important.test.ts

Lines 6 to 31 in a8c54ac

	test('Utilities can be wrapped in a selector', async () => {
	// This is the v4 equivalent of `important: "#app"` from v3
	let input = css`
	#app {
	@tailwind utilities;
	}
	`
	let compiler = await compile(input)
	expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
	"#app {
	.underline {
	text-decoration-line: underline;
	}
	.hover\\:line-through {
	&:hover {
	@media (hover: hover) {
	text-decoration-line: line-through;
	}
	}
	}
	}
	"
	`)
	})

So for a full CSS file:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

@theme {
  /* ... */
}

@layer utilities {
  [data-theme="core"] {
    @tailwind utilities;
  }
}

[aromko]

@wongjn thanks this seems to work. thanks a lot.