mcpField
T
tailwindcss-spacing

tailwindcss-spacing

github.com/fusengineDesign & UI3446 installsUpdated 2w ago
Repository

About tailwindcss-spacing

tailwindcss-spacing is a reference skill for Tailwind CSS v4.3 spacing utilities. It covers margin, padding, logical-axis utilities, child spacing, the configurable scale, and common layout patterns.

Key features

  1. 01Margin and negative-margin utilities
  2. 02Padding utilities by side and axis
  3. 03Logical block- and inline-axis spacing
  4. 04Spacing between flex or grid children
  5. 05Configurable spacing scale and examples

Use cases

  1. 01Looking up the right margin utility
  2. 02Applying consistent padding to cards
  3. 03Spacing stacked or flex items
  4. 04Building centered containers

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/agents --skill tailwindcss-spacing

After installing, type/tailwindcss-spacingin Claude Code to confirm it loaded.

Bundled filesreferences/margin.mdreferences/padding.md

Details

From the project README
Complete reference for Tailwind CSS v4.3 spacing utilities: margin (`m-*` and per-side variants, negative margins, `m-auto` centering), padding (`p-*` and per-side variants), logical block-axis margin/padding (`mbs-*`/`mbe-*`/`pbs-*`/`pbe-*`, since v4.2), and space-between (`space-x-*`/`space-y-*` for flex/grid children).

Documents the configurable spacing scale (--spacing base unit, default 0.25rem) and common composition patterns (centered containers, padded cards, stacked children).

Tailwind CSS Spacing Utilities

Complete reference for Tailwind CSS v4.3 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
Logical Block-Axis Classes (since v4.2)
  • mbs-{size} / mbe-{size}: margin-block-start / margin-block-end
  • pbs-{size} / pbe-{size}: padding-block-start / padding-block-end
  • Inline-axis counterparts: ms-*/me-*, ps-*/pe-*
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.3 uses a configurable spacing scale where --spacing is the base unit (default: 0.25rem/4px). Since v4.3.1, *-0 emits 0 and *-1 emits var(--spacing) instead of a calc().

ClassValue
00
px1px
0.5calc(var(--spacing) * 0.5) = 0.125rem
1var(--spacing) = 0.25rem
2calc(var(--spacing) * 2) = 0.5rem
3calc(var(--spacing) * 3) = 0.75rem
4calc(var(--spacing) * 4) = 1rem
6calc(var(--spacing) * 6) = 1.5rem
8calc(var(--spacing) * 8) = 2rem
12calc(var(--spacing) * 12) = 3rem
16calc(var(--spacing) * 16) = 4rem

Common Patterns

Centered Container
<div class="mx-auto">Centered content</div>
Card with Padding
<div class="p-6 bg-white rounded-lg shadow">Card content</div>
Flex Items with Spacing
<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
Stack with Vertical Spacing
<div class="space-y-4">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

See detailed references:

Comments

Markdown supported