home / skills / fusengine / agents / tailwindcss-spacing

tailwindcss-spacing skill

safe

/plugins/tailwindcss/skills/tailwindcss-spacing

This skill helps you implement Tailwind CSS v4.1 spacing utilities for margin, padding, and inter-element space, speeding consistent UI layouts.

npx playbooks add skill fusengine/agents --skill tailwindcss-spacing

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

2.3 KB

---
name: tailwindcss-spacing
description: "Spacing utilities Tailwind CSS v4.1. Margin (m-*, mx-*, my-*, mt-*, mr-*, mb-*, ml-*, -m-* negative, m-auto), Padding (p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*), Space between (space-x-*, space-y-*)."
user-invocable: false
---

# Tailwind CSS Spacing Utilities

Complete reference for Tailwind CSS v4.1 spacing utilities: margin, padding, and space-between.

## Quick Reference

### Margin Classes
- **m-{size}**: All sides margin
- **mx-{size}**: Horizontal (left + right)
- **my-{size}**: Vertical (top + bottom)
- **mt-{size}**: Top margin
- **mr-{size}**: Right margin
- **mb-{size}**: Bottom margin
- **ml-{size}**: Left margin
- **-m-{size}**: Negative margin
- **m-auto**: Auto margin (centering)

### Padding Classes
- **p-{size}**: All sides padding
- **px-{size}**: Horizontal (left + right)
- **py-{size}**: Vertical (top + bottom)
- **pt-{size}**: Top padding
- **pr-{size}**: Right padding
- **pb-{size}**: Bottom padding
- **pl-{size}**: Left padding

### Space Between Children
- **space-x-{size}**: Horizontal spacing between flex/grid children
- **space-y-{size}**: Vertical spacing between flex/grid children

## Spacing Scale

Tailwind CSS v4.1 uses a configurable spacing scale where `--spacing` is the base unit (default: 0.25rem/4px).

| Class | Value |
|-------|-------|
| 0 | 0 |
| px | 1px |
| 0.5 | calc(var(--spacing) * 2) = 0.5rem |
| 1 | calc(var(--spacing) * 4) = 1rem |
| 2 | calc(var(--spacing) * 8) = 2rem |
| 3 | calc(var(--spacing) * 12) = 3rem |
| 4 | calc(var(--spacing) * 16) = 4rem |
| 6 | calc(var(--spacing) * 24) = 6rem |
| 8 | calc(var(--spacing) * 32) = 8rem |
| 12 | calc(var(--spacing) * 48) = 12rem |
| 16 | calc(var(--spacing) * 64) = 16rem |

## Common Patterns

### Centered Container
```html
<div class="mx-auto">Centered content</div>
```

### Card with Padding
```html
<div class="p-6 bg-white rounded-lg shadow">Card content</div>
```

### Flex Items with Spacing
```html
<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

### Stack with Vertical Spacing
```html
<div class="space-y-4">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>
```

See detailed references:
- [Margin utilities →](./references/margin.md)
- [Padding utilities →](./references/padding.md)

Overview

This skill provides a compact, actionable reference for Tailwind CSS v4.1 spacing utilities (margin, padding, and space-between). It maps common class patterns to the spacing scale and shows practical usage for layout, cards, and spacing between elements. Use it to speed up class selection and reduce guesswork when building UIs with Tailwind spacing utilities.

How this skill works

The skill lists available margin and padding classes (all-sides, axis, directional, negative, and auto) and the space-x/space-y utilities for spacing between children. It explains the configurable spacing scale based on a base unit (default 0.25rem / 4px) and provides quick patterns and example snippets for common layouts. Use the classes directly in your markup to apply consistent spacing without custom CSS.

When to use it

When you need consistent margin or padding across components
When spacing between flex or grid children must be controlled uniformly
When centering containers with auto margins
When using negative margins to pull elements or overlap sections
When you want to rely on a configurable, design-system-friendly spacing scale

Best practices

Prefer axis and directional utilities (mx, my, mt, etc.) for precise control
Use space-x/space-y on parent containers instead of per-child margins for simpler markup
Rely on the spacing scale to keep spacing consistent across components
Use m-auto for horizontal centering of block-level elements
Avoid overusing negative margins; reserve them for intentional overlap patterns

Example use cases

Centered layout: <div class="mx-auto"> to constrain and center a container
Card layout: <div class="p-6 bg-white rounded-lg shadow"> for padding inside a card
Horizontal gap between flex children: <div class="flex space-x-4"> with multiple items
Vertical stack spacing: <div class="space-y-4"> to evenly space stacked blocks
Fine-tuned offsets: use -m- classes to create controlled overlaps or pull elements

FAQ

What does the spacing scale base mean?

The scale uses a configurable base unit (default 0.25rem/4px). Classes multiply that base to produce consistent spacing values.

When should I use space-x/space-y vs individual margins?

Use space-x/space-y on the parent to manage gaps between siblings—it simplifies markup and avoids margin collapse and uneven spacing.