Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor mi in quam scelerisque, at iaculis nulla faucibus. Fusce euismod aliquet metus, sit amet scelerisque urna condimentum vel. Suspendisse potenti.
Nullam eu felis vitae purus lobortis feugiat. Maecenas egestas, sapien nec elementum tempor, nisi enim congue est, at eleifend libero diam vel nunc. Sed dignissim ante ut magna lobortis, at commodo enim tempor.
Curabitur sit amet nibh convallis, sagittis nibh sit amet, fringilla magna. Nulla facilisi. Praesent egestas, quam ut vestibulum finibus, sem dolor aliquet felis, vel commodo risus magna ac magna.
text-base leading-normalLine height (leading) controls vertical spacing between lines of text. Proper line height improves readability, accessibility, and visual hierarchy in your designs. When building complex components, you'll often pair line height adjustments with other utilities like those found in our flexbox layout builder for precise vertical alignment.
In Tailwind, line height classes work as multipliers of the font size. For example, leading-normal sets line-height to 1.5 × the current font size.
leading-relaxed (1.625) or leading-normal (1.5) for paragraphs
leading-tight (1.25) for titles to reduce vertical space. For headings with decorative effects, you might also explore our text decoration tools.
leading-5 (1.25rem) for consistent button heights
leading-snug (1.375) for monospaced fonts
WCAG Guidelines: Line height should be at least 1.5 for body text. For paragraphs, aim for line-height between 1.5 and 2.0 for optimal readability.
Dyslexia & reading: Increased line height (1.75-2.0) can improve readability for users with dyslexia.
Zoom users: Relative line heights (multipliers) scale better than fixed values when users zoom in.
Line height needs often change at different screen sizes. When building responsive layouts, you might also need to adjust grid structures—our grid generator can help create adaptive column systems that work harmoniously with your typography.
<!-- Increase line height on larger screens for better readability -->
<p class="text-base leading-tight md:leading-normal lg:leading-relaxed">
This text becomes more spacious on tablets and desktops.
</p>
<!-- Reduce line height for headings on mobile to save space -->
<h2 class="text-lg leading-snug sm:leading-tight md:leading-normal">
Responsive heading
</h2>Tip: Use tighter line heights on mobile where space is limited, and increase for desktop reading comfort.
For precise control, use Tailwind's arbitrary value syntax:
leading-[1.75]
leading-[calc(1em+0.5rem)]
sm:leading-[1.8] md:leading-[2]
Note: Custom values won't appear in your compiled CSS unless you use JIT mode or add them to your config.
These classes work with any framework using Tailwind: React, Vue, Svelte, Angular, or plain HTML. Line height utilities are part of Tailwind's core typography plugin.
Line height CSS property has universal browser support (all browsers, all versions). Generated classes use standard CSS that works everywhere.
This tool runs entirely client-side with no external API calls. Generated code can be copied directly into your projects with zero dependencies.
Relative: leading-normal, leading-tight (multipliers based on font size). Fixed: leading-4, leading-6 (exact rem values). Use relative for scalable typography, fixed for precise UI control. For elements like buttons, you might combine fixed line heights with our input field styler to maintain consistent dimensions.
Add to tailwind.config.js:
module.exports = {
theme: {
extend: {
lineHeight: {
'11': '2.75rem',
'12': '3rem',
}
}
}
}Yes, but note that the Typography plugin applies its own line heights. Use prose classes for content, and override with specific line height utilities when needed.
For baseline grids, use fixed line heights (leading-6, leading-8) that match your spacing scale. Combine with consistent margin/padding utilities for vertical rhythm. Our list styler tool can help maintain consistent spacing in vertical content structures.
This generator is built with vanilla JavaScript and uses Tailwind CSS v3.3+. All processing happens locally in your browser—no data is sent to external servers. For more typography control, explore our font generator and letter spacing tool.
Last reviewed for Tailwind CSS v3.3 compatibility. Line height utilities are stable across recent versions.