leading-arbitrary-value syntax
The leading-[<value>] utility sets line-height with an arbitrary value. It produces line-height: <value>.
Tailwind CSS · Utilities reference · all subjects
line-height
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
leading-none utility removes line height
The leading-none utility sets line-height: 1, making the line height equal to the font size with no extra spacing between lines.
leading-number syntax for line-height only
The leading-<number> utility sets only the line-height independent of font-size. It produces line-height: calc(var(--spacing) * <number>). For example, leading-6 sets line-height to calc(var(--spacing) * 6).
leading-custom-property syntax
The leading-(<custom-property>) utility sets line-height using a custom CSS property. It produces line-height: var(<custom-property>).
line-height spacing scale uses --spacing variable
Line height utilities that accept numbers (leading-<number> and text-<size>/<number>) calculate their values using calc(var(--spacing) * <number>), meaning they reference the spacing scale from the theme configuration.
Example: leading-6, leading-7, leading-8 independent line-height
Example showing leading-6, leading-7, and leading-8 classes applied to text-sm paragraphs to demonstrate setting line-height independently of font-size.
Example: leading-none removes line height
Example showing leading-none class applied to a text-2xl paragraph to demonstrate setting line-height equal to font-size.
line-height utilities support responsive variants
Line-height utilities like leading-5 and leading-6 can be prefixed with responsive breakpoint modifiers to apply different line heights at different screen sizes.
line-height is customizable via spacing scale
The leading utility can be customized by modifying the spacing scale in the theme configuration, similar to other utilities that use spacing values.