Tailwind Typography Plugin Test

Light Mode (prose)

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is a paragraph with bold text, italic text, and a link. The typography plugin should style these elements beautifully.

This is a blockquote that should have distinct styling.

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
const example = "code block";

Inline code snippet should also be styled.

Dark Mode (prose-invert)

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is a paragraph with bold text, italic text, and a link. The typography plugin should style these elements beautifully in dark mode.

This is a blockquote that should have distinct styling in dark mode.

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
const example = "code block";

Inline code snippet should also be styled.

Custom Prose Modifiers (prose-lg with custom colors)

Custom Styled H1

Custom Styled H2

This paragraph uses custom prose modifiers to match the site's design system. Links like this one should be orange, and inline code should also use the orange theme.

This blockquote should work with custom colors applied.

✅ Test Results

If you can see properly styled typography in all three sections above, the @tailwindcss/typography plugin is working correctly with Tailwind CSS v4.

  • ✓ Basic prose classes work in light mode
  • ✓ prose-invert classes work in dark mode
  • ✓ prose-lg and custom modifiers (prose-a:, prose-headings:, prose-code:) work
  • ✓ All typography elements (headings, paragraphs, lists, code, blockquotes) are styled