Line Height
@include('_partials.class-table', [
'rows' => $page->config['theme']['lineHeight']->sortBy(function ($value, $name) {
return is_numeric($name) ? 1 : 0;
})->map(function ($value, $name) {
$class = ".leading-{$name}";
$code = "line-height: {$value};";
$description = "Set the line height of an element to {$value}.";
return [$class, $code, $description];
})
])
Relative line-heights
Use the leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, and leading-loose utilities to give an element a relative line-height based on its current font-size.
@component('_partials.code-sample') @foreach (['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'] as name)
.leading-name
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet ...
@endforeach @endslot @endcomponentFixed line-heightsv1.2.0+
Use the leading-{size} utilities to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element's final size.
@component('_partials.code-sample') @foreach (range(3, 10) as $name)
.leading-name
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet ...
@endforeach @endslot @endcomponentResponsive
To control the line height of an element at a specific breakpoint, add a {screen}: prefix to any existing line height utility. For example, use md:leading-loose to apply the leading-loose utility at only medium screen sizes and above.
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
@component('_partials.responsive-code-sample') @slot('none')
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
@endslot @slot('sm')Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
@endslot @slot('md')Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
@endslot @slot('lg')Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
@endslot @slot('xl')Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
@endslot @slot('code')Lorem ipsum dolor sit amet ...
@endslot @endcomponentCustomizing
By default Tailwind provides six relative and eight fixed line-height utilities. You change, add, or remove these by customizing the lineHeight section of your Tailwind theme config.
@component('_partials.customized-config', ['key' => 'theme.extend.lineHeight'])
- 'extra-loose': '2.5',
- '12': '3rem', @endcomponent
@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'line height', 'property' => 'lineHeight', ], 'variants' => [ 'responsive', ], ])
