Skip to main content

Typography

In this chapter, you learn how to style text with Tailwind CSS.

Font size​

ClassSizeLine height
text-xs12px16px
text-sm14px20px
text-base16px24px
text-lg18px28px
text-xl20px28px
text-2xl24px32px
text-3xl30px36px
text-4xl36px40px
text-5xl48px1 (equivalent to 48px)
text-6xl60px1 (equivalent to 60px)
Line height for large headings

At text-5xl and above, the line height is set to the unitless value 1 (the same as the font size). This is because they are intended for use in large text such as headings. When you use them for body text, adjust the line height with leading-normal or leading-relaxed.

Note that in v4, line heights are defined on a calc() basis (for example, text-xs is calc(1 / 0.75)). The table above lists the computed px values.

<p class="text-sm">Small text</p>
<p class="text-base">Base text</p>
<p class="text-lg">Large text</p>
<h1 class="text-4xl">Heading</h1>

Font weight​

Classweight
font-thin100
font-light300
font-normal400
font-medium500
font-semibold600
font-bold700
font-extrabold800
font-black900
<p class="font-normal">Normal</p>
<p class="font-medium">Medium</p>
<p class="font-bold">Bold</p>

Font family​

ClassFont
font-sansThe system sans-serif
font-serifA serif
font-monoA monospace font
<p class="font-sans">Sans-serif</p>
<p class="font-serif">Serif</p>
<code class="font-mono">Monospace font</code>

Line height (line-height)​

ClassValue
leading-none1
leading-tight1.25
leading-snug1.375
leading-normal1.5
leading-relaxed1.625
leading-loose2
<p class="leading-tight">Tight line height</p>
<p class="leading-normal">Normal line height</p>
<p class="leading-relaxed">Relaxed line height</p>

Letter spacing (letter-spacing)​

ClassValue
tracking-tighter-0.05em
tracking-tight-0.025em
tracking-normal0
tracking-wide0.025em
tracking-wider0.05em
tracking-widest0.1em
<p class="tracking-tight">Tight letter spacing</p>
<p class="tracking-wide">Wide letter spacing</p>

Text alignment​

ClassAlignment
text-leftLeft
text-centerCenter
text-rightRight
text-justifyJustified
<p class="text-center">Centered text</p>

Text color​

<p class="text-gray-500">Gray</p>
<p class="text-blue-600">Blue</p>
<p class="text-red-500">Red</p>
<p class="text-green-600">Green</p>

Text decoration​

Underline and strikethrough​

<p class="underline">Underline</p>
<p class="line-through">Strikethrough</p>
<p class="no-underline">No decoration</p>

Decoration styles​

<p class="underline decoration-wavy">Wavy</p>
<p class="underline decoration-dotted">Dotted</p>
<p class="underline decoration-dashed">Dashed</p>
<p class="underline decoration-double">Double</p>

Decoration color and thickness​

<p class="underline decoration-blue-500 decoration-2">
  A thick blue underline
</p>

Text transform​

<p class="uppercase">converted to uppercase</p>
<p class="lowercase">CONVERTED TO LOWERCASE</p>
<p class="capitalize">capitalized first letters</p>
<p class="normal-case">No transform</p>

Text overflow​

Ellipsis​

<p class="truncate w-48">
  A long text gets truncated...
</p>

Wrapping​

<p class="break-normal">Normal wrapping</p>
<p class="break-words">Wrap even mid-word</p>
<p class="break-all">Wrap at any position</p>

Whitespace​

<p class="whitespace-nowrap">No wrapping</p>
<p class="whitespace-pre">Preserve whitespace</p>
<p class="whitespace-pre-wrap">Preserve whitespace + wrap</p>

Line clamp​

Control truncation across multiple lines.

<p class="line-clamp-2">
  A long text is truncated after 2 lines.
  The third line and beyond are not shown.
  More text continues...
</p>

<p class="line-clamp-3">Truncate after 3 lines</p>

Vertical alignment​

<span class="align-baseline">Baseline</span>
<span class="align-top">Top</span>
<span class="align-middle">Middle</span>
<span class="align-bottom">Bottom</span>

Text indent​

<p class="indent-4">First line indented by 16px</p>
<p class="indent-8">First line indented by 32px</p>

Practical examples​

Heading and subtext​

<div class="text-center">
  <h1 class="text-4xl font-bold text-gray-900">
    Main title
  </h1>
  <p class="mt-2 text-lg text-gray-600">
    A subtitle goes here
  </p>
</div>

Article body​

<article>
  <h2 class="text-2xl font-bold mb-4">Heading</h2>
  <p class="text-gray-700 leading-relaxed mb-4">
    This is the body text. A readable line height and proper contrast
    improve readability for users.
  </p>
  <p class="text-gray-700 leading-relaxed">
    This is the second paragraph...
  </p>
</article>

Card text​

<div class="p-4 bg-white rounded-lg shadow-sm">
  <span class="text-xs font-semibold text-blue-600 uppercase tracking-wide">
    Category
  </span>
  <h3 class="mt-2 text-xl font-bold text-gray-900">
    Card title
  </h3>
  <p class="mt-2 text-sm text-gray-600 line-clamp-2">
    This is the card description. If it is long, it is truncated after 2 lines.
    More text continues here...
  </p>
</div>

Quote​

<blockquote class="pl-4 border-l-4 border-blue-500 italic text-gray-600">
  <p class="text-lg">"A quotation goes here."</p>
  <cite class="block mt-2 text-sm not-italic">— Author name</cite>
</blockquote>

Label and input​

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">
    Email address
  </label>
  <input
    type="email"
    class="w-full px-3 py-2 border border-gray-300 rounded-sm text-base"
    placeholder="example@email.com"
  />
  <p class="mt-1 text-xs text-gray-500">
    * We will send you a confirmation email
  </p>
</div>

Considerations for Japanese fonts​

When you work on a project that handles Japanese, you need to be careful with font settings.

@theme {
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}
<p class="font-sans">日本語テキスト</p>
Optimizing Japanese web fonts

Japanese fonts have larger file sizes than English fonts, so when you load them from a service like Google Fonts, consider specifying font-display: swap and narrowing down the weights you use.

Summary​

  • text-* for font size
  • font-* for weight and family
  • leading-* for line height
  • tracking-* for letter spacing
  • text-center, etc. for alignment
  • truncate / line-clamp-* for truncation
  • Combinations that keep readability in mind