Text Styling

Colour, alignment, decoration, transform, truncation, wrapping and text shadows — everything you apply to text after choosing a font.

Once the type scale is settled, these are the utilities you use every day.

Colour#

HTML

<p class="text-gray-900 dark:text-gray-100">Body</p>
<p class="text-gray-500">Muted</p>
<a class="text-indigo-600 hover:text-indigo-500">Link</a>
<p class="text-red-600/80">Error at 80% opacity</p>

Full palette and the opacity modifier are covered in Colors.

Alignment#

Utility	CSS
`text-left` `text-center` `text-right`	Physical alignment
`text-justify`	Justified — use sparingly on the web
`text-start` / `text-end`	Logical, flips in RTL

Vertical alignment of inline content uses align-*: align-baseline, align-middle, align-top, align-bottom, align-text-top, align-text-bottom, align-sub, align-super.

Decoration#

Utility	Effect
`underline` `overline` `line-through` `no-underline`	Line type
`decoration-solid` `decoration-dashed` `decoration-dotted` `decoration-wavy` `decoration-double`	Style
`decoration-2` `decoration-4`	Thickness
`decoration-indigo-500`	Colour
`underline-offset-4`	Distance from the baseline

Loading preview…

HTML

<div class="space-y-2 p-4 text-sm text-gray-800">
  <p><a href="#" class="underline decoration-indigo-500 decoration-2 underline-offset-4 hover:decoration-wavy">A link with room to breathe</a></p>
  <p class="line-through decoration-red-500">Removed from the plan</p>
  <p class="underline decoration-dotted decoration-gray-400 underline-offset-2">A definition</p>
</div>

Transform and style#

Utility	Effect
`uppercase` `lowercase` `capitalize` `normal-case`	`text-transform`
`italic` / `not-italic`	`font-style`

Truncation and clamping#

Utility	Behaviour
`truncate`	One line, ellipsis — sets `overflow-hidden text-ellipsis whitespace-nowrap`
`text-ellipsis` / `text-clip`	Overflow behaviour on its own
`line-clamp-3`	Exactly three lines, then an ellipsis
`line-clamp-none`	Remove clamping

Loading preview…

HTML

<div class="mx-auto max-w-xs space-y-3 p-4 text-sm">
  <p class="truncate rounded bg-gray-100 p-2 text-gray-700">A single line that is far too long to fit inside this narrow container.</p>
  <p class="line-clamp-2 rounded bg-gray-100 p-2 text-gray-700">A longer paragraph that runs to several lines but is clamped to exactly two, with an ellipsis appended at the end of the visible text.</p>
</div>

Wrapping and breaking#

Utility	Behaviour
`text-wrap`	Default wrapping
`text-nowrap`	Never wrap
`text-balance`	Balance line lengths — for headings
`text-pretty`	Avoid orphans — for paragraphs
`wrap-break-word`	Break long words when needed v4.1
`wrap-anywhere`	Break anywhere, including inside flex items v4.1
`break-all`	Break between any two characters
`break-keep`	Do not break CJK text
`whitespace-pre` / `whitespace-pre-wrap` / `whitespace-pre-line`	Preserve whitespace

Loading preview…

HTML

<div class="mx-auto max-w-sm space-y-4 p-4">
  <h3 class="text-xl font-bold text-balance text-gray-900">
    A headline long enough that the last line would otherwise hold one lonely word
  </h3>
  <p class="text-sm text-pretty text-gray-600">
    Body copy with text-pretty avoids leaving a single word stranded on the final line.
  </p>
  <p class="wrap-break-word rounded bg-gray-100 p-2 font-mono text-xs text-gray-700">
    https://example.com/an/extremely/long/url/that/would/otherwise/overflow/its/container
  </p>
</div>

Text shadow#

v4.1

Utility	Size
`text-shadow-2xs` `text-shadow-xs` `text-shadow-sm` `text-shadow-md` `text-shadow-lg`	Presets
`text-shadow-indigo-500`	Colour
`text-shadow-lg/30`	Colour with opacity
`text-shadow-none`	Remove

Loading preview…

HTML

<div class="rounded-lg bg-gradient-to-br from-sky-400 to-indigo-600 p-8 text-center">
  <p class="text-2xl font-bold text-white text-shadow-lg">Legible over an image</p>
</div>

Useful for text over photography, where a shadow keeps it readable regardless of the background.

Lists#

Utility	Effect
`list-disc` `list-decimal` `list-none`	Marker type
`list-inside` / `list-outside`	Marker position
`marker:text-indigo-500`	Style the markers

HTML

<ul class="list-disc space-y-1 pl-5 marker:text-indigo-500">
  <li>Styled markers</li>
</ul>

Other useful utilities#

Utility	Purpose
`indent-8`	First-line indent
`align-middle`	Vertical alignment of inline boxes
`selection:bg-indigo-100`	Style highlighted text
`caret-indigo-600`	Text cursor colour
`hyphens-auto`	Automatic hyphenation (needs `lang`)
`content-['—']`	Pseudo-element content
`sr-only`	Visually hidden, still announced

Common patterns#

Article heading and lede#

HTML

<header class="mx-auto max-w-3xl">
  <p class="text-sm font-semibold tracking-wide text-indigo-600 uppercase">Engineering</p>
  <h1 class="mt-2 text-4xl font-bold tracking-tight text-balance text-gray-900 sm:text-5xl">
    Shipping a design system without a component library
  </h1>
  <p class="mt-4 text-lg leading-relaxed text-pretty text-gray-600">
    How we replaced 40,000 lines of CSS with a token layer and a handful of primitives.
  </p>
</header>

Truncated list row#

HTML

<li class="flex min-w-0 items-center gap-3">
  <span class="size-2 shrink-0 rounded-full bg-emerald-500"></span>
  <span class="min-w-0 flex-1 truncate">A long item title that will be cut off cleanly</span>
  <time class="shrink-0 text-xs text-gray-500">2h</time>
</li>

Code and keyboard hints#

HTML

<p class="text-sm text-gray-700">
  Press <kbd class="rounded border border-gray-300 bg-gray-50 px-1.5 py-0.5 font-mono text-xs">⌘K</kbd>
  to open <code class="rounded bg-gray-100 px-1 py-0.5 font-mono text-xs">search</code>.
</p>

Common mistakes#

truncate on a flex child without min-w-0. Nothing happens.
Removing link underlines. Fails colour-blind users.
text-justify for web body copy. Without hyphenation it creates rivers of whitespace.
text-center on long paragraphs. Centred text has no consistent left edge, which slows reading.
line-clamp-* on content the user needs. It hides information with no affordance to reveal it; pair it with a "show more" control.
Using text-white on a light gradient without a shadow. Contrast fails in the light regions.

Fonts — families, sizes, weights, tracking
Colors — palette and contrast
Overflow & Layering — clipping context for truncation

Text Styling

Colour#

Alignment#

Decoration#

Transform and style#

Truncation and clamping#

Wrapping and breaking#

Text shadow#

Lists#

Other useful utilities#

Common patterns#

Article heading and lede#

Truncated list row#

Code and keyboard hints#

Common mistakes#

Related topics#