leading-none…leading-loose plus numeric leading-3…10. This family contains 15 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
leading-3 | line-height: .75rem; |
leading-4 | line-height: 1rem; |
leading-5 | line-height: 1.25rem; |
leading-6 | line-height: 1.5rem; |
leading-7 | line-height: 1.75rem; |
leading-8 | line-height: 2rem; |
leading-9 | line-height: 2.25rem; |
leading-10 | line-height: 2.5rem; |
leading-none | line-height: 1; |
leading-tight | line-height: 1.25; |
leading-snug | line-height: 1.375; |
leading-normal | line-height: 1.5; |
leading-relaxed | line-height: 1.625; |
leading-loose | line-height: 2; |
leading-base | line-height: 1.5; |
Example#
example
<h1 class="text-5xl leading-tight">Headlines want tight leading</h1>
<p class="leading-relaxed">Body wants room.</p>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Headlines: leading-tight (1.25); body: leading-relaxed/normal
Related#
colors/index|Text color · utilities/typography/font-size|Font size