Line Height And Letter Spacing in TailwindCSS
? Line Height and Letter Spacing in Tailwind CSS
Tailwind provides utilities to control line height (space between lines) and letter spacing (space between characters) for text styling.
1. Line Height (leading-*)
Controls the vertical space between lines of text.
| Class | CSS Equivalent | Description |
|---|---|---|
leading-none | line-height: 1; | No extra spacing |
leading-tight | line-height: 1.25; | Tight line height |
leading-snug | line-height: 1.375; | Snug spacing |
leading-normal | line-height: 1.5; | Normal (default) |
leading-relaxed | line-height: 1.625; | Relaxed spacing |
leading-loose | line-height: 2; | Loose (more spaced) |
Example:
<p class="leading-tight"> This paragraph has tight line height, so lines are close together.</p><p class="leading-loose"> This paragraph has loose line height, so lines are more spaced out.</p>2. Letter Spacing (tracking-*)
Controls horizontal spacing between letters (tracking).
| Class | CSS Equivalent | Description |
|---|---|---|
tracking-tighter | letter-spacing: -0.05em; | Tighter letter spacing |
tracking-tight | letter-spacing: -0.025em; | Slightly tight spacing |
tracking-normal | letter-spacing: 0; | Normal spacing (default) |
tracking-wide | letter-spacing: 0.025em; | Slightly wider spacing |
tracking-wider | letter-spacing: 0.05em; | Wider letter spacing |
tracking-widest | letter-spacing: 0.1em; | Widest letter spacing |
Example:
<p class="tracking-tight"> This text has tight letter spacing.</p><p class="tracking-widest"> This text has widest letter spacing.</p>Combined Example
<p class="leading-relaxed tracking-wide text-lg"> This paragraph has relaxed line height and wide letter spacing.</p>If you want, I can help with responsive line-height or letter-spacing or customizing these values in Tailwind config!
