tailwindcss/docs/source/spacing.md

extends	title
_layouts.markdown	Spacing

Spacing

Usage Customizing Responsive

Using

The syntax below is combined to create a system for padding and margins. For example, .pt-2 would add padding to the top of the element to the value of 0.5rem and .mx-0 would make the horizontal margin zero.

Class

p Padding

m Margin

pull Negative Margin

Position (optional)

t Top

r Right

b Bottom

l Left

x Horizontal

y Vertical

Space

0 0

1 0.25rem

2 0.5rem

3 0.75rem

4 1rem

6 1.5rem

8 2rem

Customizing the spacing scale

You can customize the margin and padding utilities using the @sizing-scale variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.

// The default sizing scale
@sizing-scale:
  '1' 0.25rem,
  '2' 0.5rem,
  '3' 0.75rem,
  '4' 1rem,
  '6' 1.5rem,
  '8' 2rem,
  '12' 3rem,
  '16' 4rem,
;

By default the @sizing-scale is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the @margin-scale, @pull-scale and @padding-scale variables.

// Override the margin scale
@margin-scale:
  '1' 0.25rem,
  '2' 0.5rem,
  // ...
;

// Override the pull scale
@pull-scale:
  '1' 0.25rem,
  '2' 0.5rem,
  // ...
;

// Override the padding scale
@padding-scale:
  '1' 0.25rem,
  '2' 0.5rem,
  // ...
;

Responsive spacing utilities

The spacing utilities can also be used with responsive prefixes:

<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>

div {
  .screen(lg, {
    .mt-6;
  });
}