Tailwind CSS: Typography

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

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

Link to docs

Font Size

ClassCSS
text-xs0.75rem
text-sm0.875rem
text-base1rem
text-lg1.125rem
text-xl1.25rem
text-2xl1.5rem
text-3xl1.875rem
text-4xl2.25rem
text-5xl3rem
text-6xl3.75rem
text-7xl4.5rem
text-8xl6rem
text-9xl8rem

Font weight

ClassCSS
font-hairlinefont-weight: 100
font-thinfont-weight: 200
font-lightfont-weight: 300
font-normalfont-weight: 400
font-mediumfont-weight: 500
font-semiboldfont-weight: 600
font-boldfont-weight: 700
font-extraboldfont-weight: 800
font-blackfont-weight: 900

Center text

Use text-center to center text.

Line Height

ClassCSS
.leading-noneline-height: 1
.leading-tightline-height: 1.25
.leading-snugline-height: 1.375
.leading-normalline-height: 1.5
.leading-relaxedline-height: 1.625
.leading-looseline-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
Want to learn more? Check out our courses