iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

@tailwindcss/typography

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

@tailwindcss/typography (the prose plugin) gives long-form HTML a sensible default style — paragraphs, headings, lists, code blocks, blockquotes — without manually styling every tag. Use it for blog posts, docs, terms-of-service pages, markdown-rendered content. Pair with a font config and a dark variant for instant good-looking prose.

Add prose styles, customise, and theme it

EXAMPLE
<!-- 1) Install + register -->
<!-- npm i -D @tailwindcss/typography -->

<!-- tailwind.config.js -->
<!-- module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
  plugins: [require('@tailwindcss/typography')],
}; -->

<!-- 2) Wrap any HTML region with .prose -->
<article class='prose lg:prose-lg prose-slate dark:prose-invert max-w-none'>
  <h1>Refund Policy</h1>
  <p>Refunds are processed within 5 business days of receipt of the
     returned item.</p>

  <h2>Conditions</h2>
  <ul>
    <li>Item must be unworn and in original packaging.</li>
    <li>Sale items are final unless faulty under Australian Consumer Law.</li>
  </ul>

  <blockquote>
    'If you receive a faulty item, contact us within 30 days.'
  </blockquote>

  <pre><code>curl -X POST https://api.example.com/refunds -H 'Authorization: Bearer ...'</code></pre>
</article>

<!-- 3) Size variants -->
<!--   prose-sm   prose   prose-lg   prose-xl   prose-2xl  -->
<article class='prose prose-sm sm:prose lg:prose-lg xl:prose-xl'>...</article>

<!-- 4) Colour theming — built-in palettes -->
<!--   prose-slate (default), prose-gray, prose-zinc, prose-neutral, prose-stone -->
<!--   prose-red, prose-orange, prose-amber, prose-yellow, ...                  -->
<article class='prose prose-zinc'>...</article>

<!-- 5) Dark mode in one class -->
<article class='prose dark:prose-invert'>...</article>

<!-- 6) Override individual elements with prose-<tag> -->
<article class='prose
                prose-headings:font-display
                prose-h1:text-3xl
                prose-a:text-blue-600 hover:prose-a:text-blue-800
                prose-code:before:hidden prose-code:after:hidden
                prose-img:rounded-xl'>
  ...
</article>

<!-- 7) Wider-than-default content -->
<!--   .prose enforces a comfortable 65ch reading width. Override with max-w-none -->
<article class='prose max-w-none lg:max-w-3xl'>...</article>

<!-- 8) Custom theme via tailwind.config.js -->
<!-- theme: {
  extend: {
    typography: ({ theme }) => ({
      DEFAULT: {
        css: {
          '--tw-prose-body':     theme('colors.slate[800]'),
          '--tw-prose-headings': theme('colors.slate[900]'),
          '--tw-prose-links':    theme('colors.blue[600]'),
          'a:hover': { color: theme('colors.blue[800]') },
          'code::before': { content: 'none' },
          'code::after':  { content: 'none' },
          'h1': { fontFamily: theme('fontFamily.display').join(',') },
          'blockquote p:first-of-type::before': { content: 'none' },
          'blockquote p:last-of-type::after':   { content: 'none' },
        },
      },
    }),
  },
}, -->

<!-- 9) Pair with a Markdown pipeline -->
<!-- Server-side: Marked / Remark / showdown render Markdown to HTML.
     Wrap the result in .prose and you have publication-quality typography
     with no custom CSS. -->

<!-- 10) Not for application UI -->
<!-- .prose is opinionated for LONG-FORM content. Do NOT wrap dashboards or
     forms in it; the default selectors override input styling, list
     bullets, link colours, and table spacing. Confine .prose to the
     article body. -->

Why it matters

Wrap long-form content in `.prose` once, theme it once, and you stop hand-styling every blog post, doc page, and policy. Pair `prose` with `dark:prose-invert` and a `max-w-none` if you control the layout, and the entire content-publishing pipeline (Markdown → HTML → page) looks production-quality with zero per-page CSS.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<!-- npm i -D @tailwindcss/typography -->
<article class="prose lg:prose-xl">…</article>
Try it Yourself »

Discussion

Loading…