TailwindCSS's Typography plugin (@tailwindcss/typography) provides elegant typography styles for content areas, especially suitable for blog posts, documentation pages, and other scenarios requiring good typography.
Installation and Configuration
1. Install Plugin
# Using npm npm install -D @tailwindcss/typography # Using yarn yarn add -D @tailwindcss/typography # Using pnpm pnpm add -D @tailwindcss/typography
2. Configure Plugin
// tailwind.config.js module.exports = { plugins: [ require('@tailwindcss/typography'), ], }
Basic Usage
1. prose Class
The core of the Typography plugin is the prose class, which provides complete typography styles for content areas.
<article class="prose"> <h1>Article Title</h1> <p>This is a paragraph of text.</p> <h2>Level 2 Heading</h2> <p>This is another paragraph.</p> <ul> <li>List item 1</li> <li>List item 2</li> </ul> <blockquote> This is a blockquote. </blockquote> </article>
2. Responsive prose
<article class="prose md:prose-lg lg:prose-xl"> <h1>Responsive Typography</h1> <p>Adjust typography based on screen size.</p> </article>
Color Variants
1. Dark Mode
<article class="prose dark:prose-invert"> <h1>Dark Mode Typography</h1> <p>Automatically adapts to dark theme.</p> </article>
2. Custom Colors
<article class="prose prose-blue"> <h1>Blue Theme</h1> <p>Use blue as accent color.</p> </article> <article class="prose prose-gray"> <h1>Gray Theme</h1> <p>Use gray as accent color.</p> </article>
Size Variants
1. Different Sizes
<!-- Small --> <article class="prose prose-sm"> <h1>Small Typography</h1> <p>Suitable for sidebar or small areas.</p> </article> <!-- Default --> <article class="prose"> <h1>Default Typography</h1> <p>Standard size.</p> </article> <!-- Large --> <article class="prose prose-lg"> <h1>Large Typography</h1> <p>Suitable for main content areas.</p> </article> <!-- Extra Large --> <article class="prose prose-xl"> <h1>Extra Large Typography</h1> <p>Suitable for showcase pages.</p> </article> <!-- 2XL --> <article class="prose prose-2xl"> <h1>2XL Typography</h1> <p>Suitable for large displays.</p> </article>
Custom Configuration
1. Extend Theme
// tailwind.config.js module.exports = { theme: { extend: { typography: (theme) => ({ DEFAULT: { css: { color: theme('colors.gray.800'), maxWidth: '65ch', h1: { color: theme('colors.gray.900'), fontWeight: theme('fontWeight.bold'), }, h2: { color: theme('colors.gray.900'), fontWeight: theme('fontWeight.bold'), }, strong: { color: theme('colors.gray.900'), }, a: { color: theme('colors.blue.600'), '&:hover': { color: theme('colors.blue.500'), }, }, }, }, }), }, }, plugins: [ require('@tailwindcss/typography'), ], }
2. Custom Variants
// tailwind.config.js module.exports = { theme: { extend: { typography: (theme) => ({ 'brand': { css: { '--tw-prose-body': theme('colors.brand.gray'), '--tw-prose-headings': theme('colors.brand.primary'), '--tw-prose-links': theme('colors.brand.accent'), '--tw-prose-bold': theme('colors.brand.primary'), '--tw-prose-quotes': theme('colors.brand.primary'), }, }, }), }, }, plugins: [ require('@tailwindcss/typography'), ], }
<!-- Use custom variant --> <article class="prose prose-brand"> <h1>Brand Theme</h1> <p>Use custom brand colors.</p> </article>
Practical Examples
1. Blog Post
<article class="prose prose-lg mx-auto"> <h1>How to Use TailwindCSS Typography</h1> <p class="lead"> TailwindCSS Typography plugin provides elegant typography styles for content areas, making articles and documentation pages more beautiful. </p> <h2>Installation and Configuration</h2> <p>First install the plugin:</p> <pre><code>npm install -D @tailwindcss/typography</code></pre> <h2>Basic Usage</h2> <p>Just add the <code class="prose">prose</code> class:</p> <ul> <li>Automatically handle heading styles</li> <li>Optimize paragraph spacing</li> <li>Beautify list styles</li> <li>Enhance quote effects</li> </ul> <blockquote> <p> Typography plugin makes content typography simple and elegant. </p> </blockquote> <h2>Code Examples</h2> <pre><code>const greeting = "Hello, World!"; console.log(greeting);</code></pre> <h2>Tables</h2> <table> <thead> <tr> <th>Feature</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Automatic Typography</td> <td>No manual style adjustment needed</td> </tr> <tr> <td>Responsive</td> <td>Adapts to different screen sizes</td> </tr> </tbody> </table> </article>
2. Documentation Page
<div class="max-w-4xl mx-auto"> <article class="prose prose-slate"> <h1>API Documentation</h1> <p> This document describes how to use our API. </p> <h2>Authentication</h2> <p> All API requests require authentication tokens. </p> <pre><code>Authorization: Bearer YOUR_TOKEN</code></pre> <h2>Endpoints</h2> <table> <thead> <tr> <th>Method</th> <th>Endpoint</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>GET</td> <td>/api/users</td> <td>Get user list</td> </tr> <tr> <td>POST</td> <td>/api/users</td> <td>Create new user</td> </tr> </tbody> </table> <h2>Example</h2> <pre><code>fetch('/api/users', { headers: { 'Authorization': 'Bearer YOUR_TOKEN' } }) .then(response => response.json()) .then(data => console.log(data));</code></pre> </article> </div>
3. Marketing Page
<div class="bg-gray-50 py-12"> <div class="max-w-3xl mx-auto px-4"> <article class="prose prose-indigo prose-lg"> <h1>Product Introduction</h1> <p class="lead"> Our product helps you complete work more efficiently. </p> <h2>Core Features</h2> <ul> <li>Automated workflows</li> <li>Real-time data analysis</li> <li>Team collaboration tools</li> <li>Secure and reliable</li> </ul> <h2>Why Choose Us</h2> <blockquote> <p> Our product has served over 10,000 businesses, helping them improve efficiency by 50%. </p> </blockquote> <h2>Get Started</h2> <p> Sign up now to start your free trial. </p> </article> </div> </div>
Best Practices
1. Choose Appropriate Sizes
<!-- Small areas --> <aside class="prose prose-sm"> <h3>Sidebar content</h3> </aside> <!-- Main content --> <main class="prose prose-lg"> <h1>Main content</h1> </main> <!-- Showcase pages --> <section class="prose prose-xl"> <h1>Showcase title</h1> </section>
2. Combine with Dark Mode
<article class="prose dark:prose-invert"> <h1>Dark Mode Support</h1> <p>Automatically adapts to theme changes.</p> </article>
3. Custom Brand Colors
// tailwind.config.js module.exports = { theme: { extend: { colors: { brand: { primary: '#3b82f6', secondary: '#10b981', accent: '#f59e0b', }, }, typography: (theme) => ({ brand: { css: { '--tw-prose-body': theme('colors.gray.700'), '--tw-prose-headings': theme('colors.brand.primary'), '--tw-prose-links': theme('colors.brand.accent'), '--tw-prose-bold': theme('colors.brand.primary'), }, }, }), }, }, plugins: [ require('@tailwindcss/typography'), ], }
Considerations
- Content Scope: prose class affects all child element styles
- Nesting Issues: Avoid nesting another prose inside prose
- Custom Styles: Can use TailwindCSS utility classes to override default styles
- Performance Considerations: prose class generates a lot of CSS, ensure content option is correctly configured
- Browser Compatibility: Test display effects on different browsers
Summary
TailwindCSS Typography plugin provides:
- Elegant default typography styles
- Flexible size and color variants
- Powerful customization capabilities
- Good dark mode support
By properly using the Typography plugin, you can quickly create beautiful content pages and improve reading experience.