Tailwind Spacing Reference

A Tailwind spacing reference is a lookup table for the spacing utilities that control padding, margin, gap, and the space between child elements. Tailwind does not use arbitrary pixel values for these utilities; it uses a fixed numeric scale, and this page lets you search that scale and convert between class names, pixels, and rem values.

The scale runs from 0 up to 96 in the steps Tailwind ships: 0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, and 96. Each number maps to a pixel value at four pixels per unit, so p-4 is 16px and p-96 is 384px. Because the root font size is 16px by default, the same value in rem is the pixel value divided by 16, so 16px is 1rem and 96px is 6rem.

The reference covers the padding prefixes (p-, px-, py-, pt-, pr-, pb-, pl-), the margin prefixes (m-, mx-, my-, mt-, mr-, mb-, ml-) plus their negative variants, the gap prefixes (gap-, gap-x-, gap-y-), and the space-between utilities (space-x-, space-y-). Category and type filters narrow the table to one family or one side, and the search box finds a class instantly.

Two converters sit below the table. The first turns a class name such as p-4 into its pixel and rem values, and the second takes a pixel value and returns the nearest Tailwind class. Everything runs in your browser, so no values are sent anywhere.

Key Concepts

• Spacing scale — the fixed set of numeric steps Tailwind uses for spacing utilities.
• Unit rule — each scale step equals four pixels times the number, so 0.5 maps to 2px.
• Rem conversion — pixels divided by the 16px default root size, so 16px equals 1rem.
• Prefix families — padding, margin, gap, and space-between utilities each use their own prefix.
• Negative margins — margin utilities also exist with a leading minus, such as -mt-4.
• Converters — a class-to-pixels/rem converter and a pixels-to-nearest-class converter.

1. Search for a class — type a class or a numeric value into the search box to find matching spacing utilities.
2. Filter by category and type — use the category filter for padding, margin, gap, or space, and the type filter for all sides, x, y, t, r, b, or l.
3. Switch the view — toggle between table and list view depending on how you prefer to scan values.
4. Convert a class to pixels — enter a class such as p-4 in the first converter to see its pixel and rem values.
5. Convert pixels to a class — enter a pixel value such as 32 in the second converter to find the nearest Tailwind class.

Spacing is one of the most frequently edited parts of any Tailwind layout, and a quick reference saves a lot of trial and error. These are some of the situations where it helps most.

1. Pixel perfect spacing — translate a design value such as 24px into the class p-6 without guessing.
2. Design handoff — convert measurements from a design tool into Tailwind spacing classes.
3. Responsive layouts — choose consistent spacing steps for each breakpoint of a layout.
4. Quick conversion — turn an existing class such as gap-3 into pixels when debugging a layout.
5. Overlap and offsets — use negative margins to pull elements together or create deliberate overlap.
6. Learning the scale — memorize the common steps faster by seeing class, pixel, and rem side by side.