In CSS, you can use padding and margin to create space around an element or its contents.

In Tailwind, you have a wide variety of utility classes for both. Here are a few examples:

• pt-4: add a top padding of 4
• ml-1: add a left margin of 1
• mx-4: add a horizontal margin of 4

All these utility classes have the same structure:

You essentially define what you want (padding or margin), where you want it (position), and how big it should be (size).

Position

The position can describe:

• A single side

  t

  r

  b

  l
  t for top, r for right, b for bottom, or l for left;

• All sides

  in this case, leave out the position;

• Horizontal Space

  x
  x, which means it's applied to left and right at the same time; or

• Vertical Space

  y
  y, which means it's applied to top and bottom at the same time.

Size

Tailwind comes with a default spacing scale. The size refers to this spacing scale.

• 1 translates to 0.25rem, or 4 pixels in most browsers.
• The scale is proportional, so 8 is twice as much as 4.
• Sizes go up to 96. Every value between 1 and 12 can be used directly, but starting from 12 the gaps between two values of the scale start to increase.