Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

# Install the typography plugin
npm install -D @tailwindcss/typography

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

<article class="prose lg:prose-xl max-w-none mx-auto px-4 py-8">
  <h1>Getting Started</h1>
  <p>This paragraph will be styled automatically with sensible font size,
     line height, and colour — no extra classes needed.</p>
  <h2>Installation</h2>
  <ul>
    <li>Step one: install the package</li>
    <li>Step two: add to config</li>
  </ul>
  <blockquote>
    <p>Utility-first CSS scales better than anything I've used.</p>
  </blockquote>
  <pre><code>npm install tailwindcss</code></pre>
</article>

<article class="prose dark:prose-invert lg:prose-lg max-w-3xl mx-auto">
  
</article>

<article class="prose
                prose-headings:font-extrabold prose-headings:text-indigo-900
                prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
                prose-code:bg-gray-100 prose-code:px-1 prose-code:rounded
                max-w-3xl mx-auto">
  Custom styled prose content
</article>