Tailwind CSS - Typography

Mastering Typography in Tailwind CSS

Typography is the backbone of web design. Tailwind CSS provides a comprehensive suite of utility classes to control every aspect of your text, from font families and sizes to line heights and letter spacing. These utilities allow you to build beautiful, readable, and consistent typographic systems directly in your HTML.

Comprehensive Typography Utilities

Below is a reference of the most common typography topics covered by Tailwind’s utilities. For a full list, always refer to the official Tailwind CSS documentation.

Topic	Description
Font Family	Sets the typeface for an element using font-sans, font-serif, or font-mono.
Font Size	Controls the text size with a responsive scale, e.g., text-base, text-lg, text-4xl.
Font Smoothing	Applies font smoothing for better rendering using antialiased or subpixel-antialiased.
Font Style	Controls whether text is italic or not-italic.
Font Weight	Controls the boldness of text, from font-thin to font-black.
Font Variant Numeric	Controls advanced typographic features for numbers, like lining-nums or tabular-nums.
Letter Spacing	Adjusts the spacing between characters (kerning) with tracking-* utilities.
Line Clamp	Truncates text to a specific number of lines. Requires the @tailwindcss/line-clamp plugin.
Line Height	Controls the vertical space between lines of text (leading) with leading-* utilities.
List Style	Controls the appearance of list markers with list-disc, list-decimal, list-inside, etc.
Text Align	Sets the horizontal alignment of text: text-left, text-center, text-right, text-justify.
Text Color	Sets the color of the text using Tailwind’s extensive color palette, e.g., text-slate-700.
Text Decoration	Adds decorations like underline, line-through, or no-underline.
Text Decoration Color	Sets the color of the text decoration, e.g., decoration-sky-500.
Text Decoration Style	Sets the style of the decoration, like decoration-solid, decoration-wavy, etc.
Text Decoration Thickness	Controls the thickness of the decoration line, e.g., decoration-2.
Text Underline Offset	Controls the distance of the underline from the text with underline-offset-*.
Text Transform	Changes the capitalization of text: uppercase, lowercase, capitalize.
Text Overflow	Handles text that overflows its container with truncate, text-ellipsis, or text-clip.
Vertical Align	Controls the vertical alignment of inline or table-cell elements.
Whitespace	Controls how whitespace and line breaks within an element are handled.
Word Break	Controls how words should be broken to prevent overflow.

Modern Best Practice: The Typography Plugin

For content that you don’t directly control, such as a blog post rendered from Markdown or content from a headless CMS, hand-crafting typography classes for every element is impractical. For this, Tailwind offers the official @tailwindcss/typography plugin.

By adding a single prose class to a container element, the plugin will apply beautiful, readable typographic defaults to all nested elements like headings, paragraphs, lists, and blockquotes. It’s a massive time-saver for content-rich pages.

Example: Styling a Blog Post with the prose class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- The Typography plugin requires a build step, but this demo uses a custom CDN build that includes it -->
  <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
  <title>Typography Plugin Demo</title>
</head>
<body class="bg-gray-100 p-8">
  <article class="prose lg:prose-xl mx-auto bg-white p-8 rounded-lg shadow-md">
    <h1>The Art of Building Modern Web Applications</h1>
    <p>Building for the web has evolved significantly. We've moved from static pages to dynamic, interactive experiences powered by sophisticated frameworks and tools.</p>
    <h2>Key Principles</h2>
    <p>There are several principles to keep in mind:</p>
    <ul>
      <li>Component-Based Architecture</li>
      <li>Declarative UI</li>
      <li>State Management</li>
    </ul>
    <blockquote>
      "The key to performance is elegance, not battalions of special cases." - Jon Bentley
    </blockquote>
    <p>By embracing these concepts, developers can create applications that are not only powerful but also maintainable and scalable. Using a utility-first CSS framework like <a href="#">Tailwind CSS</a> can dramatically speed up this process.</p>
  </article>
</body>
</html>

Configuration & Customization

One of Tailwind’s greatest strengths is its configurability. You can easily customize your typography by editing the theme object in your tailwind.config.js file. This is where you can add custom fonts, define your own font size scale, or adjust line heights to match your brand’s design system.

Example: Adding a Custom Font

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        // Add 'Inter' to the front of the sans-serif stack
        'sans': ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

After adding this configuration (and importing the ‘Inter’ font in your CSS or HTML), you can use the standard font-sans class to apply it throughout your project.