Line Height & Letter Spacing in Tailwind

Tailwind provides utility classes to control the spacing between lines of text and individual characters. This allows for better readability and typographic styling.

1. Line Height (Leading)

Use leading-{size} to adjust line height:

leading-none      /* 1 */
leading-tight     /* 1.25 */
leading-snug      /* 1.375 */
leading-normal    /* 1.5 */
leading-relaxed   /* 1.625 */
leading-loose     /* 2 */

This text has tight line height.
It appears closely packed.

This text has loose line height.
It gives more breathing space between lines.

2. Letter Spacing (Tracking)

Use tracking-{value} to control space between characters:

tracking-tighter   /* -0.05em */
tracking-tight     /* -0.025em */
tracking-normal    /* 0em */
tracking-wide      /* 0.025em */
tracking-wider     /* 0.05em */
tracking-widest    /* 0.1em */

Tracking Tight: TEXT

Tracking Widest: TEXT

3. When to Use

Use leading-loose for long paragraphs for better readability.
tracking-wider is great for uppercase titles or logos.
Use leading-tight for compact designs like cards or buttons.

Conclusion

Controlling line height and letter spacing in Tailwind is simple and effective. These utilities help you craft clean, readable interfaces with consistent spacing.

← Previous: Font Size, Family, and Weight Next: Text Alignment and Decoration →