Pseudoclass styles apply at wrong level with tailwind v4

[nathonius]

What version of @tailwindcss/typography are you using?

v0.5.16

What version of Node.js are you using?

v20.17.0

What browser are you using?

Firefox

What operating system are you using?

Windows (WSL)

Reproduction repository

Tailwind play: https://play.tailwindcss.com/P8iFbnFepo
Repo: https://github.com/nathonius/astro-site/tree/tailwind-upgrade-issue-repro

Describe your issue

Upon upgrading to Tailwindcss v4, I'm finding that classes documented here in the typography repo are no longer applying correctly.

I have the following structure to apply simple colors and hover colors for links:

<main class="prose prose-a:text-primary hover:prose-a:text-secondary m-2 md:min-w-[65ch]">
  <slot />
</main>

This is modeled directly after the example in the docs. This works great with Tailwind v3, but in v4 now the :hover is taking precedence; instead of the color of the links changing when I hover the link, the color of the links changes when I hover the main element.

I don't know if this is truly a bug or just a documentation issue; swapping the order of the prose-a and hover classes makes it work again:

<main class="prose prose-a:text-primary prose-a:hover:text-secondary m-2 md:min-w-[65ch]">
  <slot />
</main>

It may be enough to remove this line "When stacking these modifiers with other modifiers like hover, you most likely want the other modifier to come first:" and update the code example; honestly the way it works now seems more accurate anyway.

[DanielOberlechner]

Does anybody know when the TailwindCSS Typography plugin will be fully compatible with TailwindCSS v4?
As far as I'm informed at the moment it doesn't work is that correct?
Do we have a date or a time frame in mind when the support will be here?

Kind regards,
Daniel Oberlechner

[nathonius]

Does anybody know when the TailwindCSS Typography plugin will be fully compatible with TailwindCSS v4?
As far as I'm informed at the moment it doesn't work is that correct?
Do we have a date or a time frame in mind when the support will be here?

Kind regards,
Daniel Oberlechner

I would say it mostly works with a few caveats like this one. That's the only issue I've noticed and I've now updated to tailwind v4.

[adamwathan]

Hey! Yeah this is one of the changes in v4:

https://tailwindcss.com/docs/upgrade-guide#variant-stacking-order

Need to update the README to probably show both a v3 and v4 example.

[philipp-spiess]

Updated the readme, thanks!