Tailwind CSS: Typography

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

Aligning text

Use text-left text-center text-right

For example, to align text to the right you can use the text-right class:

<p class="text-right">
  This text is aligned to the right
</p>

Use font-thin, font-extralight, font-light, font-medium, font-bold, and more

Use leading-tight, leading-snug, leading-relaxed and more to increase line height

underline, no-underline, line-through

uppercase, lowercase, capitalize…

Class	CSS
font-sans	`font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`
font-serif	`font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;`
font-mono	`font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;`

Use text-center to center text.

You can also use numbers, from .leading-3 to .leading-10

0:	Introduction
1:	Box model properties
2:	Colors
3:	▶︎ Typography
4:	Flexbox and Grid in Tailwind
5:	Modifiers
6:	Responsive design in Tailwind
7:	Apply a style to children with Tailwind
8:	How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9:	How to align center vertically using Tailwind
10:	How to use custom fonts with Tailwind CSS
11:	Setting up Tailwind CSS on Vite
12:	Show-hide an element based on existence of a parent class in Tailwind
13:	The Tailwind Cheat Sheet
14:	How to set up Tailwind CSS (v4)
15:	You can’t generate classes dynamically in Tailwind