[v4] Styling doesn't get applied properly to ::after elements

[spaceemotion]

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?

[ktmn]

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.

[Alma219Way]

Thanks for providing all the details. It sounds like the issue you're facing with Tailwind CSS v4 beta 3 might be due to changes in how pseudo-elements and content are handled.

In Tailwind CSS v4, the ::after and ::before pseudo-elements are treated differently compared to v3. The content: var(--tw-content) line being re-added is part of this update. You might need to adjust your Tailwind configuration or utility classes to align with these changes.

Best Regards, Alma MyFedLoan