TW4 Data Attribute Issue: Losing Global data-theme Inheritance in Next.js #17115
-
|
We're migrating a large multi-tenant application from Next.js 14 and Tailwind CSS 3 to Tailwind CSS 4 and have run into an issue with data attributes. Previous Behavior (Tailwind CSS 3)In Tailwind CSS 3, we could set a global data-theme attribute in the Next.js layout: <html lang={config.acceptLanguage()} `data-theme={config.brand()} />(Assuming This allowed us to apply styles dynamically within components: <p className="data-[theme=BrandA]:flex hidden">Show</p>Issue in Tailwind CSS 4This approach no longer works. The expectation is that <CustomButton data-theme="BrandA">
<p className="data-[theme=BrandA]:flex hidden">Show</p>
</CustomButton>This workaround works but requires unnecessary repetition. Workarounds & ConcernsOne alternative is applying styles via CSS: [data-theme="BrandA"] .ifBrandAShow {
display: flex;
}However, this is cumbersome since we rely heavily on utility classes like QuestionIs there a way to ensure |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
I would have expected the behavior for it to be the same in v3 and v4 where I would expect it not to work, since the <p data-theme="BrandA" className="data-[theme=BrandA]:flex hidden">Show</p>Regardless, you should be able to use the <html data-theme="BrandA">
…
<p class="in-data-[theme=BrandA]:flex hidden">Show</p> |
Beta Was this translation helpful? Give feedback.
-
|
You're a genius. Thank you. That worked. |
Beta Was this translation helpful? Give feedback.
I would have expected the behavior for it to be the same in v3 and v4 where I would expect it not to work, since the
data-themewould need to be on the same element asdata-[theme="BrandA"]::Regardless, you should be able to use the
in-*variant modifier withdata-*to get this to work: