The Blog Post with No Headings

Scenario

Example team: a marketing site renders blog posts from a headless CMS with v-html / dangerouslySetInnerHTML. The rest of the site uses Tailwind.

What you see in production

Articles have no visible headings, no paragraph spacing, and bullet lists have no bullets. Editors file a bug: "the CMS broke formatting".

The naive code

<article>{{ post.html }}</article>   <!-- <h2>, <p>, <ul> from the CMS, no classes -->

Reproduce it

<div class="grid gap-6 p-6 sm:grid-cols-2">
  <article class="rounded-lg border border-gray-200 p-4">
    <h2>Unstyled heading</h2><p>Preflight resets margins and font sizes.</p>
    <ul><li>No bullets</li><li>No indentation</li></ul>
  </article>
  <article class="rounded-lg border border-gray-200 p-4 text-gray-700 [&_h2]:mb-2 [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-gray-900 [&_li]:ml-5 [&_p]:mb-3 [&_ul]:list-disc">
    <h2>Styled heading</h2><p>Arbitrary variants style the CMS markup from the parent.</p>
    <ul><li>Bullets are back</li><li>And indentation</li></ul>
  </article>
</div>

Root cause

Preflight, Tailwind's base reset, removes browser default styles so utilities start from a clean slate. HTML you don't control has no utility classes, so it ends up unstyled.

The fix

• Use the official typography plugin: @plugin "@tailwindcss/typography"; and wrap content in <article class="prose">, with dark:prose-invert for dark mode.
• For small, specific needs, style descendants from the parent with arbitrary variants ([&_h2]:text-xl) or a scoped component class in @layer components.

Trade-offs

• prose gives good defaults quickly but needs customizing to match a brand.
• Arbitrary variants keep everything in Tailwind but get long; move them into one component.

Detect it in production

• A test article in the CMS containing every element type, included in visual regression tests.

Key points

• Preflight removes default styles on purpose.
• Style external HTML with prose or scoped descendant styles.