Search⌘ K
AI Features
Home
Courses
Modern CSS with Tailwind

Alignment and Spacing

Explore how to apply Tailwind CSS classes to manage horizontal and vertical text alignment, control line height with relative and absolute spacing, adjust letter spacing, and style lists. This lesson helps you understand and customize typography to enhance web page readability and design.

We'll cover the following...

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

module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end
Text alignment

Try it out

Try to make a text style with the following attributes:

  • text-justify
  • leading-loose
  • text-red-400
  • hover:text-gray-700

module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end
Test your understanding of text alignment

Note: Try to change the text using different text styles.

Absolute option

The absolute option is based on rem, meaning it is derived from the root element size, not the size of the DOM element it is attached to. We have .leading-3 through .leading-10, which takes us from 0.75rem to 2.5rem in 0.25 increments.

Spacing

Next is the property that CSS calls letter-spacing and Tailwind calls tracking. We have got .tracking-normal and two utilities for pushing the text closer together:

  • .tracking-tight
  • .tracking-tighter

We have have three utilities for making the letter-spacing wider:

  • .tracking-wide
  • .tracking-wider
  • .tracking-widest

Note: These utilities are used to add effects on headers with big text.

In the playground below, we’ll try letter spacing as follows:

  • tracking-tighter
  • tracking-wider

module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end
Character spacing

Try it out

Try to make text style with the following attributes:

  • tracking-widest
  • align-middle
  • leading-tight
  • text-green-400
  • hover:text-gray-700

module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end
Test your understanding of character spacing

Note: Try out different text styles and see what happens.

Lists

Tailwind includes two sets of classes to manage the <li> tags. The first is the style of the list. We have .list-disc (bulleted), .list-decimal (numbered), and .list-none. The second allows us to choose whether the bullet or number is inside or outside the text box with .list-inside and .list-outside.