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>

Link to docs

Font size

Use text-xs, text-sm, text-base, text-lg, text-xl, text-2xl and more

Link to docs

Font weight

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

Link to docs

Line height

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

Link to docs

Text decoration

underline, no-underline, line-through

Link to docs

Text transform

uppercase, lowercase, capitalize…

Link to docs

Font Family

Class	CSS
font-sans	font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-serif	font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
font-mono	font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

Link to docs

Font Size

Class	CSS
text-xs	0.75rem
text-sm	0.875rem
text-base	1rem
text-lg	1.125rem
text-xl	1.25rem
text-2xl	1.5rem
text-3xl	1.875rem
text-4xl	2.25rem
text-5xl	3rem
text-6xl	3.75rem
text-7xl	4.5rem
text-8xl	6rem
text-9xl	8rem

Font weight

Class	CSS
font-hairline	font-weight: 100
font-thin	font-weight: 200
font-light	font-weight: 300
font-normal	font-weight: 400
font-medium	font-weight: 500
font-semibold	font-weight: 600
font-bold	font-weight: 700
font-extrabold	font-weight: 800
font-black	font-weight: 900

Center text

Use text-center to center text.

Line Height

Class	CSS
.leading-none	line-height: 1
.leading-tight	line-height: 1.25
.leading-snug	line-height: 1.375
.leading-normal	line-height: 1.5
.leading-relaxed	line-height: 1.625
.leading-loose	line-height: 2

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

Lessons in this unit:

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 - css
12:	Show-hide an element based on existence of a parent class in Tailwind - css
13:	The Tailwind Cheat Sheet
14:	How to setup Tailwind with PurgeCSS and PostCSS
15:	You can’t generate classes dynamically in Tailwind