[v4] Multi theme font sans not works for data theme #15434

rpiechowicz · 2024-12-18T08:50:07Z

rpiechowicz
Dec 18, 2024

What version of Tailwind CSS are you using?

v4-0.0.8

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

--

What version of Node.js are you using?

--

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Describe your issue

Fails to overwrite font sans for custom data theme.

Reproduction bug in tailwind play.

Answered by adamwathan

Hey! Here's a working version of what you're trying to do:

Key points:

Should use @layer theme (although @layer base should work too, but that's a bug you helped me just notice in Tailwind Play)
Need to make sure you set font-sans on the same element that has the data attribute, the font won't update otherwise because it's inherited from higher in the tree and the place where it inherits from resolves the CSS variable to a different value (this is just CSS behavior, not Tailwind stuff)

adamwathan · 2024-12-18T14:24:27Z

Hey! Here's a working version of what you're trying to do:

Key points:

Should use @layer theme (although @layer base should work too, but that's a bug you helped me just notice in Tailwind Play)
Need to make sure you set font-sans on the same element that has the data attribute, the font won't update otherwise because it's inherited from higher in the tree and the place where it inherits from resolves the CSS variable to a different value (this is just CSS behavior, not Tailwind stuff)

0 replies