tailwindcss-spacing_skill

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