Spacing

Margin

Utilities for controls margin (and negative margin) in 0.25rem increments.

Class

Usage

Set margin to top, bottom, left and right.

<!-- Example -->
<y class="m-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set margin to left and right.

<!-- Example -->
<y class="mx-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set margin to top and bottom.

<!-- Example -->
<y class="my-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set margin to top.

<!-- Example -->
<y class="mt-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set margin to bottom.

<!-- Example -->
<y class="mb-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set margin to left.

<!-- Example -->
<y class="ml-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set margin to right.

<!-- Example -->
<y class="mr-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'm',
    //variant: 'responsive',
    property: 'margin',
    modifier: (
      '72': '...rem',
      '84': '...rem'
      ...
    )
  )
)

Variant