tailwindlabs
[v4] Styling doesn't get applied properly to ::after elements
What version of Tailwind CSS are you using? v4 beta 3
What build tool (or framework if it abstracts the build tool) are you using? Astro 5 beta, Vite 6.01
What version of Node.js are you using? v20
What browser are you using? Chrome, Brave
What operating system are you using? Windows, Linux
Reproduction URL https://play.tailwindcss.com/X0BTXShKkd
Describe your issue The element no longer looks the same when upgrading from v3 to v4. the after-styles don't get applied properly:
Before (v3):
After (v4):
I also noticed that every after directive seems to re-add the content: var(--tw-content) line, which seems a bit redundant?
In TW4 the variant chaining order is reversed, changing
after:data-[active=true]:border-solid -> data-[active=true]:after:border-solid
seems to work. (Although there might be some special cases for some variants where the order shouldn't matter, don't know off the top of my head which ones these are, if any)
I also noticed that every after directive seems to re-add the content: var(--tw-content) line, which seems a bit redundant?
Especially when using @apply, you can end up with like 10 lines of the same declaration in the same selector and LightningCSS doesn't minify it out, for some reason.
@spaceemotion Did changing the variant order fix all problems for you here?
I also noticed that every after directive seems to re-add the content: var(--tw-content) line, which seems a bit redundant?
Yeah this is unfortunate but since these utilities don't have to be used together on the same node there's really no way I can see we can meaningfully reduce that output :/
Especially when using
@apply, you can end up with like 10 lines of the same declaration in the same selector and LightningCSS doesn't minify it out, for some reason.
We found a few of those issues where lightningcss doesn't minify the output fully right now. That's something that's currently under active investigation by both parties.
@philipp-spiess ah sorry, yes! swapping the order indeed fixed the issue. I just wasn't sure if that was the intention with v4, or just a known workaround.
Glad to hear about the efforts to improve minification :)
Definitely expected: https://tailwindcss.com/docs/v4-beta#stacking-order-sensitive-variants our upgrade tool also converts this case automatically.
Going to close this as it's not a bug then, thanks for the report and for your testing 🙇