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>
Font size
Use text-xs, text-sm, text-base, text-lg, text-xl, text-2xl and more
Font weight
Use font-thin, font-light, font-medium, font-bold, and more
Line height
Use leading-tight, leading-snug, leading-relaxed and more to increase line height
Text decoration
underline, no-underline, line-through
Text transform
uppercase, lowercase, capitalize…
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; |
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 |