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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
  $class: 'm',
  $property: margin,
  $modifier: (
    1: .25rem,
    2: 5rem
    //...
  )
);

// Add Variants
@include yogurt(
  $class: 'm',
  $property: margin,
  $modifier: (
    1: .25rem,
    2: 5rem
    //...
  ),
  $variant: (
    'responsive'
  )
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.