Article Title Goes Here
Subtitle or introduction with comfortable spacing
Section Heading
<p class="leading-relaxed text-gray-800">
Body text with plenty of breathing room for easy reading...
</p>
Line height is one of those things that can make or break your design. Too tight and your text feels cramped and hard to read. Too loose and it looks disconnected, like each line is floating away from the others.
The good news is that Tailwind CSS gives you full control over line height with simple utility classes. No need to write custom CSS or guess what values look good – everything is built in and ready to use.
In this guide I'll show you exactly how to work with line height in Tailwind CSS, from the basics to some newer features that make life a lot easier.
If you've worked with Tailwind before, you've probably seen classes like leading-normal or leading-tight and wondered why they're called "leading" instead of "line-height".
The term comes from traditional typography. Back in the days of metal typesetting, printers would add thin strips of lead between lines of text to increase spacing. That's where we get the word "leading" (pronounced "ledding").
In Tailwind, the leading-* prefix controls line height. Here's the basic syntax:
```html
This text has normal line height
This text has tighter line height
This text has looser line height
```
You can also use the modern slash notation to combine font size and line height in one class:
```html
Small text with line height of 1.5rem
Large text with line height of 1.75rem
```
This is cleaner and easier to read than applying two separate classes.
Here's something that confuses a lot of people when they first start using Tailwind's line height utilities – there are actually two different types of values, and they behave very differently.
Relative values (unitless numbers) scale with your font size. If you make your text bigger, the line height automatically adjusts proportionally.
Fixed values (rem-based) stay the same no matter what font size you use. They give you precise control over vertical spacing.
Let me show you what I mean:
```html
Normal spacing
Tighter spacing
Looser spacing
Fixed at 1.5rem
Fixed at 1.75rem
Fixed at 2rem
```
So when should you use each type?
Use relative values (leading-normal, leading-tight, etc.) when:
Use fixed values (leading-6, leading-7, etc.) when:
Here's a practical example. Say you're building a card component:
```html
Card Title
Description text with comfortable reading spacing that adjusts
if the font size changes.
```
The title uses leading-tight to keep it compact and punchy. The description uses leading-relaxed for better readability. Both are relative values, so they'll scale nicely if you ever need to adjust font sizes.
Sometimes the default Tailwind values just don't cut it. Maybe your designer gave you exact specs, or maybe you need something between leading-normal and leading-relaxed.
That's where arbitrary values come in handy. You can create one-off custom line heights using square bracket notation:
```html
Slightly tighter than leading-tight
Fixed at 2.5rem
Fixed at 32 pixels
```
If you find yourself using the same custom value multiple times, it makes sense to add it to your Tailwind configuration instead.
For Tailwind CSS v3, you'd update your tailwind.config.js:
```javascript
module.exports = {
theme: {
extend: {
lineHeight: {
'extra-tight': '1.15',
'extra-loose': '2.5',
}
}
}
}
```
Now you can use leading-extra-tight and leading-extra-loose anywhere in your project.
For Tailwind CSS v4, the approach is different. You use the new @theme directive in your CSS:
```css
@theme {
--line-height-extra-tight: 1.15;
--line-height-extra-loose: 2.5;
}
```
The v4 approach is cleaner because everything lives in your CSS file instead of having a separate JavaScript config. Plus it follows modern CSS patterns with custom properties.
This is honestly one of my favorite new features in Tailwind CSS v4. If you've ever tried to align icons next to text, you know the pain – you end up with weird spacing, icons that sit too high or too low, and tons of trial and error.
The 1lh unit solves this completely. It represents exactly the height of one line of text at the current line height. So no matter what your text size or line height is, your icon will always be perfectly sized.
Let me show you the difference:
```html
Feature description
Feature description
```
See the difference? The 1lh version automatically scales with your text size and line height. Change the font size or line height and the icon adjusts automatically.
This is perfect for feature lists, navigation items, and any place where you have icons alongside text:
```html
-
Feature Title
Description text
```
Notice how the icons align perfectly with the first line of each feature, even though the headings and descriptions have different line heights. That's the magic of 1lh.
Before this unit existed, you'd have to use complex flexbox alignment tricks or calculate exact pixel values. Now it just works.
Getting line height right isn't just about making things look good – it directly impacts how easy your content is to read. Let me share some practical guidelines.
For body text, stick between 1.5 and 2. This is actually an accessibility requirement too. WCAG (Web Content Accessibility Guidelines) recommends a minimum line height of 1.5 for paragraph text. That's why leading-normal (1.5) is such a safe default.
```html
Meets accessibility guidelines
Even more comfortable
Hard to read for long content
Really cramped and difficult
```
Headlines are different. For large text like headings, you actually want tighter line height. Otherwise the lines feel disconnected. Use leading-tight (1.25) or even leading-none (1) for big, bold headlines.
```html
Big Headlines Need
Tight Line Height
```
Create visual hierarchy by mixing line heights. Use tight spacing for titles and looser spacing for body text. This helps readers understand what's important at a glance.
Here's a real-world example putting it all together:
```html
Article Title Goes Here
Subtitle or introduction with comfortable spacing
Section Heading
<p class="leading-relaxed text-gray-800">
Body text with plenty of breathing room for easy reading...
</p>
```
Notice how the tight headlines create impact while the relaxed body text stays comfortable to read. That's the sweet spot.
A couple more quick tips:
The key is testing your content with real users and adjusting based on feedback. What looks good on your design mockup might feel different when someone's actually trying to read it.
That's everything you need to know about controlling line height in Tailwind CSS. From the basics of leading-* classes to advanced features like the 1lh unit, you now have all the tools to create perfectly spaced typography.
Start with the defaults, experiment with custom values when needed, and always keep readability front and center. Your users will thank you for it.
Get notified when we add new templates, components, and more!
WindyBase
Make development a breeze
WindyBase is a weekly curated Tailwind CSS template and tool directory built for the modern developer.
© 2025 WindyBase. All rights reserved.