mcpField
T
tailwindcss-spacing

tailwindcss-spacing

github.com/fusengineDesign & UI3548 installsUpdated 1w ago
Repository

About tailwindcss-spacing

A reference skill for Tailwind CSS v4.3 spacing utilities, aimed at developers styling layouts. It covers margin, padding, child spacing, the configurable scale, and common composition patterns.

Key features

  1. 01Margin and negative-margin utilities
  2. 02Padding and directional variants
  3. 03Logical block-axis spacing
  4. 04Spacing between children
  5. 05Configurable spacing scale

Use cases

  1. 01Centering a container with auto margins
  2. 02Adding padding to cards
  3. 03Spacing flex or grid children
  4. 04Building vertically stacked content

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/claude-plugins --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