Font Family Size Weight in TailwindCSS
? Font Family, Size, and Weight Utilities in Tailwind CSS
Tailwind offers straightforward utilities to control the typography of your text — including font family, font size, and font weight.
1. Font Family (font-*)
Tailwind provides some default font family utilities, and you can customize more in your tailwind.config.js.
| Class | CSS Equivalent | Description |
|---|---|---|
font-sans | font-family: system-ui, ... | Sans-serif font family (default) |
font-serif | font-family: serif; | Serif font family |
font-mono | font-family: monospace; | Monospace font family |
Example:
<p class="font-sans">This uses sans-serif font.</p><p class="font-serif">This uses serif font.</p><p class="font-mono">This uses monospace font.</p>2. Font Size (text-*)
Controls the size of the text using a scale mapped to rem units.
| Class | CSS Equivalent | Approximate px Size |
|---|---|---|
text-xs | font-size: 0.75rem | 12px |
text-sm | font-size: 0.875rem | 14px |
text-base | font-size: 1rem | 16px (default) |
text-lg | font-size: 1.125rem | 18px |
text-xl | font-size: 1.25rem | 20px |
text-2xl | font-size: 1.5rem | 24px |
text-3xl | font-size: 1.875rem | 30px |
text-4xl | font-size: 2.25rem | 36px |
text-5xl | font-size: 3rem | 48px |
text-6xl | font-size: 3.75rem | 60px |
text-7xl | font-size: 4.5rem | 72px |
text-8xl | font-size: 6rem | 96px |
text-9xl | font-size: 8rem | 128px |
Example:
<h1 class="text-4xl font-bold">Big Heading</h1><p class="text-base">Normal paragraph text</p>3. Font Weight (font-*)
Control the thickness of the font.
| Class | CSS Equivalent | Description |
|---|---|---|
font-thin | font-weight: 100; | Thin |
font-extralight | font-weight: 200; | Extra Light |
font-light | font-weight: 300; | Light |
font-normal | font-weight: 400; | Normal (default) |
font-medium | font-weight: 500; | Medium |
font-semibold | font-weight: 600; | Semi-bold |
font-bold | font-weight: 700; | Bold |
font-extrabold | font-weight: 800; | Extra Bold |
font-black | font-weight: 900; | Black (heaviest) |
Example:
<p class="font-light">Light text</p><p class="font-bold">Bold text</p>Summary Example
<div class="font-serif text-xl font-semibold"> This is serif font, size 1.25rem, semi-bold.</div>If you want, I can also explain how to customize fonts or sizes in the Tailwind config!
