Alignment and Spacing

Alignment of text

Several Tailwind classes are used to specify the horizontal alignment of text. These are listed below:

• .text-left
• .text-center
• .text-right
• .text-justify

They all change the CSS text-align property. The exact bounds of the alignment depend on the box in the next chapter.

Vertical alignment

The CSS property for vertical alignment is vertical-align, and these are the Tailwind classes:

• .align-baseline
• .align-top
• .align-middle
• .align-bottom
• .align-text-top
• .align-text-bottom

As with the horizontal alignment, exact positioning depends on the text box.

Line spacing and height

For line spacing, Tailwind has both a relative and an absolute option. The relative option starts with .leading-none, which makes the line height exactly the size of the font. Leading is the printing term for line height. (It rhymes with “wedding,” not “beading”). It is normally going to feel a little cramped, and Tailwind lets us separate the line height with the following classes in order from most closely packed to farthest apart:

• .leading-tight
• .leading-snug
• .leading-normal (1.5 times the font size, usually the default)
• .leading-relaxed
• .leading-loose

In the playground below, we’ll see the text alignment is as follows:

• text-center
• text-right