You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
in the v4 css config, create a @utility that generate some class
in the playground link above: @utility bg-th { @apply bg-red-500; }
in the v4 css config, apply this @utility to the body
in the playground link above: @layer base { body { @apply bg-th; } }
in your html, use that same @utility class
in the playground link above: <div class="bg-th">
the red-500 color is correctly applied to the body
but the same red-500 is not applied to the div with bg-th class (in the playground link above it inherits its background color from its parent instead)
Without having a look at the codebase, I suspect this happens because when the bg-th utility is "applied" to the body it is also removed from the list of available classes, regardless of the fact that it is used at other places.
This is based on the fact that commenting the @apply bg-th line in the playground link above results in the bg-th class being correctly generated.
The text was updated successfully, but these errors were encountered:
e-krebs
changed the title
[v4] background utility class is not generated when also applied to body
[v4] utility class is not generated when also applied to body
Dec 28, 2024
What version of Tailwind CSS are you using?
v4.0.0-beta.8
What build tool (or framework if it abstracts the build tool) are you using?
Vite, but it is also reproducible in playground
What version of Node.js are you using?
22.12.0 (not sure about playground)
What browser are you using?
Chrome
What operating system are you using?
Windows 11
Reproduction URL
https://play.tailwindcss.com/uDAJ3VP1OF
Describe your issue
in the v4 css config, create a
@utilitythat generate some class@utility bg-th { @apply bg-red-500; }in the v4 css config, apply this
@utilityto thebody@layer base { body { @apply bg-th; } }in your html, use that same
@utilityclass<div class="bg-th">the red-500 color is correctly applied to the
bodybut the same red-500 is not applied to the div with
bg-thclass (in the playground link above it inherits its background color from its parent instead)Without having a look at the codebase, I suspect this happens because when the
bg-thutility is "applied" to the body it is also removed from the list of available classes, regardless of the fact that it is used at other places.This is based on the fact that commenting the
@apply bg-thline in the playground link above results in thebg-thclass being correctly generated.The text was updated successfully, but these errors were encountered: