Typography

Most of a website is text, so typography utilities are the ones you will type most often. Tailwind gives you a type scale where each font size comes with a sensible line height, plus utilities for weight, font family, spacing, decoration and wrapping.

In this lesson you will set sizes and weights, control line height with a short modifier, choose fonts, style underlines, and handle long text with truncation, line clamping and balanced headings.

Font size

The text-* sizes form a scale. Each one also sets a matching line height, so text looks right without extra work.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Type scale</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
</head>
<body class="flex flex-col gap-2 p-6 text-slate-800">
  <p class="text-xs">text-xs: Admit card printed on 2 Nov</p>
  <p class="text-sm">text-sm: Admit card printed on 2 Nov</p>
  <p class="text-base">text-base: Admit card printed on 2 Nov</p>
  <p class="text-lg">text-lg: Admit card printed on 2 Nov</p>
  <p class="text-2xl font-semibold">text-2xl: Hall tickets</p>
  <p class="text-4xl font-bold">text-4xl: Results</p>
  <p class="text-6xl font-black text-sky-700">98.4%</p>
</body>
</html>

Line height

To change the line height, add a slash modifier to the size: text-lg/7 is 18px text with a line height of 1.75rem (7 × 0.25rem), and text-base/relaxed uses the named relaxed value (1.625). On its own, leading-* does the same job: leading-7, leading-tight, leading-relaxed, leading-loose.

As a guide: long paragraphs read better with a looser line height (leading-relaxed), while big headings look better tight (leading-tight), because the gaps between large lines look huge.

Weight, family and style

Font weight uses names, not numbers:

There are also font-thin (100), font-extralight (200) and font-extrabold (800). A weight only shows if the font has it; many system fonts jump straight from 400 to 700.

Font family has three built-in stacks: font-sans (the default), font-serif and font-mono. To use a web font such as Poppins, load it as usual, then give it a theme name. The full method is in Customising with @theme:

@import "tailwindcss";

@theme {
  --font-display: "Poppins", sans-serif;
}
/* Now use class="font-display" */

Style and case: italic, not-italic, uppercase, lowercase, capitalize and normal-case. Letter spacing: tracking-tight, tracking-wide, tracking-widest. Uppercase labels look better with a little extra spacing, such as text-xs font-semibold uppercase tracking-wider.

Alignment: text-left, text-center, text-right and text-justify, plus text-start and text-end, which follow the text direction like the logical spacing utilities.

Underlines and decoration

Preflight removes link underlines, so you add them back on purpose. Tailwind lets you control every part of the line:

<a href="#" class="text-sky-700 underline decoration-sky-300 decoration-2 underline-offset-4 hover:decoration-sky-700">
  Download the timetable
</a>

underline draws the line, decoration-sky-300 colours it, decoration-2 makes it 2px thick, and underline-offset-4 moves it away from the letters so it does not cut through descenders like "g" and "y". There are also line-through, no-underline, and line styles such as decoration-dotted and decoration-wavy.

Long text: wrapping, truncating and clamping

Real content is messy: long names, long URLs, descriptions of different lengths. These utilities keep your layout tidy:

• truncate keeps text on one line and adds "..." where it is cut.
• line-clamp-2 (or any number) shows that many lines, then "...".
• text-balance spreads a heading's words evenly across its lines, so you do not get one lonely word on the last line.
• text-pretty avoids a single short word on the last line of a paragraph.
• wrap-break-word lets a very long word or URL break so it does not overflow. Older code uses break-words for the same thing.
• whitespace-nowrap stops text from wrapping at all, useful for prices like "₹1,299".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Long text</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
</head>
<body class="bg-slate-100 p-6">
  <article class="max-w-xs rounded-xl bg-white p-5">
    <h2 class="text-xl font-bold leading-tight text-balance text-slate-900">
      Monsoon reading list for engineering students in Kochi
    </h2>
    <p class="mt-2 truncate text-sm text-slate-500">Posted by Meera Nair in Books and Exam Preparation</p>
    <p class="mt-3 line-clamp-3 text-slate-700">
      Twelve books that explain hard ideas simply, from data structures to
      digital electronics, chosen by seniors who cleared their exams last year
      and still keep these books on their desks today.
    </p>
    <p class="mt-3 text-sm wrap-break-word text-sky-700">https://example.com/reading-lists/monsoon-2026-engineering-kochi</p>
  </article>
</body>
</html>

Remove text-balance from the heading and watch how the line breaks change. Remove line-clamp-3 and the whole paragraph appears.

Advanced: styling long articles with the typography plugin

When text comes from a database or Markdown, such as a blog post, you cannot add classes to each <p> and <h2>. The official typography plugin solves this. It adds a prose class that styles all the HTML inside it with good defaults. In a project with a build step:

npm install -D @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Then wrap the content: <article class="prose lg:prose-lg">...</article>. The @plugin directive is how Tailwind 4 loads plugins from CSS; in v3 you listed plugins in tailwind.config.js instead.

Common mistakes

• Expecting headings to be big. After Preflight, <h1> is normal text. Give it a size and weight.
• Fixed heights on text boxes. Text can wrap to more lines than you expect. Use line-clamp-* instead of a fixed height with overflow-hidden.
• Very long lines. A paragraph across a full desktop screen is hard to read. Add max-w-prose.
• Too many weights and sizes. Two or three sizes and two weights per page usually look cleaner.

Key points

• text-xs to text-9xl set font size with a matching line height.
• Change line height with a modifier (text-lg/7) or with leading-*.
• Weights use names like font-medium and font-bold; families are font-sans, font-serif and font-mono unless you add your own.
• Style underlines with underline, decoration-* and underline-offset-*.
• Handle messy text with truncate, line-clamp-*, text-balance, text-pretty and wrap-break-word.
• For long HTML content you cannot add classes to, use the typography plugin's prose class.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>News card</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
</head>
<body class="bg-slate-100 p-6">
  <article class="max-w-sm rounded-xl bg-white p-5">
    <p class="text-xs font-semibold uppercase tracking-wider text-rose-700">Sports</p>
    <h2 class="mt-1 text-2xl font-bold leading-tight text-balance">College team wins the inter-university cricket cup</h2>
    <p class="mt-2 line-clamp-2 text-slate-600">
      Kabir's unbeaten 84 in the final helped the team chase 212 with two overs to spare,
      ending a ten-year wait for the trophy.
    </p>
    <a href="#" class="mt-3 inline-block text-sky-700 underline decoration-sky-400 underline-offset-4">Read more</a>
  </article>
</body>
</html>