Course Content
Tailwind CSS for Web Development
Tailwind CSS for Web Development
Typography Utilities
Tailwind CSS provides a robust set of utilities for managing typography, allowing you to easily control font sizes, font weights, and line heights. These utilities help ensure your text is styled consistently and easily readable across different devices and screen sizes.
Font Size
Font size utilities in Tailwind CSS allow you to adjust the size of your text. These utilities follow a naming convention that makes it easy to understand and apply different sizes.
Font Size | Description |
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl , text-3xl , text-4xl , text-5xl , text-6xl | Increasingly larger text sizes. |
index
index
index
Font Weight
Font weight utilities control the thickness or boldness of the text. Tailwind CSS provides several utilities to cover a wide range of font weights, from thin to black.
Font Weight | Description |
font-thin | Thin font weight. |
font-light | Light font weight. |
font-normal | Normal font weight. |
font-medium | Medium font weight. |
font-semibold | Semi-bold font weight. |
font-bold | Bold font weight. |
font-extrabold | Extra bold font weight. |
font-black | Black font weight. |
index
index
index
Line Height
Line height utilities control the vertical spacing between lines of text. Proper line height can improve readability and the overall visual appearance of text blocks.
Line Height | Description |
leading-none | No line height. |
leading-tight | Tight line height. |
leading-snug | Snug line height. |
leading-normal | Normal line height. |
leading-relaxed | Relaxed line height. |
leading-loose | Loose line height. |
leading-3 , leading-4 , leading-5 , etc. | Specific numeric line height. |
index
index
index
Note
If you need specific information about font size, font weight, or line height, please click on the following links:
Thanks for your feedback!