Description
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.