tailwindcss-typography
tailwindcss-typography copied to clipboard
tailwindlabs
Order of CSS Rules (:first-child/:last-child margin resets vs. h5/h6) after upgrading from tailwind@2 to tailwind@3
What version of @tailwindcss/typography are you using?
v0.5.13
What version of Node.js are you using?
v20
What browser are you using?
chrome
What operating system are you using?
macOS / Linux
Reproduction repository
https://play.tailwindcss.com/q2EtxU42tl?file=config
Describe your issue
Hey there.
We ran into an issue, after upgrading from tailwind 2.x->3.x and typo v0.2 -> 0.5 where configured margins were not removed anymore if headline levels (h5/h6) were first / last child of a .prose container.
Since the update the rules (which are adding the styling (margin / color) for the headlines) are placed after the generic first/last{margin-top:0;}. Before the update it was the other way around.
This is reproducible when switching the tailwind-versions in the play link between 2 & 3: https://play.tailwindcss.com/q2EtxU42tl?file=config
My temporary solution would be to add a custom rule to the config that does the trick but it feels kind of redundant. https://play.tailwindcss.com/zvf2DXfxAY?file=config
I know this is probably related to h5/h6 not being part of the default styles but i thought it was worth to raise the question wether this is a Bug or intentional (in which case i am kind of missing hints in the changelog / documentation).
Thanks for all the great work 🌊!
