Spacing
Utilities for controlling padding, margin, and space between elements. Consistent spacing is crucial for creating harmonious layouts and establishing visual rhythm in your designs. In Tailwind v4, spacing utilities have been enhanced with support for logical properties and more intuitive responsive behaviors.
Adds space inside an element's borders, between the element's content and its border. Padding creates breathing room within components, improves readability, and makes UI elements more touchable. Tailwind's padding utilities follow a consistent spacing scale based on 0.25rem (4px) increments that create harmonious, proportional spacing throughout your design.
Adds space outside an element's borders, controlling the distance between elements. Margin creates separation between components and helps establish rhythm in your layouts. Unlike padding, margin can be negative and can collapse between adjacent elements. In Tailwind v4, margin utilities fully support logical properties for better RTL language support.
Controls the spacing between child elements without adding margin to the first or last element. This is particularly useful for consistent spacing in stacks and rows of elements where you want equal spacing between items but no extra space at the edges. In Tailwind v4, space utilities have improved integration with flexbox, grid, and other layout systems.