Tailwind Typography's prose Is Leaking Into Your Components — and the Three-Tier Fix
My CTA button had underlined links and the wrong text color, and no matter which utility class I stacked on it the issues didn't correct. The culprit wasn't the button. It was the prose class, forty lines up in the code. Start here: The prose class from @tailwindcss/typography styles every matching element beneath it — headings, paragraphs, and yes, the <a> inside your custom button component…
The <source> block contains material about a technical issue with Tailwind CSS's typography plugin. The plugin styles all elements under it, including custom components, leading to issues with CTA buttons and other components having unintended styling. The key points are:
1. The prose class from Tailwind's typography plugin styles every matched element beneath it, including headings, paragraphs, and elements like links inside custom components. This happens because prose works by descendant selectors, targeting any matching tags in the subtree.
2. The problem arises when custom components are embedded inside the article rendered by the plugin. The plugin's styling rules conflict with the components' own styles, leading to components having unintended colors, underlines, or spacing.
3. The author provides three fixes in order of preference:
- Tier 1: Design custom components to match prose's expectations so there is no conflict. For example, make inline CTAs and emphasized links inherit prose's link color and underline but differentiate them with weight or an accent border.
- Tier 2: Re-tune the plugin itself with element modifiers on the container element. This configures the plugin to change prose's rules everywhere, for example, setting the link color to the brand's color and disabling the underline.
- Tier 3: Use the "not-prose" utility for genuinely custom islands, such as product cards or interactive demos. This isolates these components from prose's styling, allowing them to be styled independently.
The article emphasizes that the fix is not about winning a CSS specificity war, but about deciding which elements are content and which are chrome, and assigning each side its jurisdiction. The author advises against simply fighting the plugin's styling authority. Instead, use Tier 1 for matching expectations, Tier 2 for re-tuning the plugin, and Tier 3 for sandboxing true UI islands.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
