Processed in your browser. Your data never leaves your device.

Tailwind Spacing Classes to CSS Reference

Tailwind's spacing scale uses a consistent numbering system where each unit equals 0.25rem (4px). This guide maps every spacing utility — padding, margin, gap, width, and height — to its CSS equivalent.

← Back to tools

Tailwind CSS to CSS Converter

Paste Tailwind utility classes and get the equivalent standard CSS. Supports spacing, layout, typography, borders, transforms, filters, colors, and arbitrary values.

Samples:

Tailwind Classes

CSS Selector:

CSS Output

Paste Tailwind classes to see CSS

Supported Tailwind Classes

Layout

display, position, visibility, overflow, z-index, box-sizing, isolation

Flexbox

flex-direction, wrap, grow, shrink, order, justify, align, self, gap

Grid

grid-cols, grid-rows, col-span, row-span, auto-cols, auto-rows, flow

Spacing

p, px, py, pt/r/b/l, m, mx, my, mt/r/b/l, space-x/y, gap

Sizing

w, h, min-w, max-w, min-h, max-h, basis, screen, full, fractions

Typography

text-size, font-weight/style/family, leading, tracking, text-align/decoration/transform, whitespace, truncate

Borders

border-width/style/radius, rounded, outline, ring

Effects

opacity, shadow, blur, grayscale, invert, sepia, backdrop-blur

Transforms

scale, rotate, translate, skew, origin

Transitions

transition, duration, ease, delay

Colors

text, bg, border, ring, accent, fill, stroke (black/white/transparent/current + arbitrary values)

Misc

cursor, pointer-events, select, resize, appearance, object-fit/position, aspect-ratio, will-change, mix-blend, columns, content, scroll, table, list

About Tailwind CSS to CSS Converter

500+ utility classes — converts layout, spacing, typography, borders, transforms, filters, and more.
Arbitrary values — handles bracket notation like w-[300px] and bg-[#1a1a2e].
Responsive/state prefixes — strips sm:, hover:, dark: etc. and marks them as comments.
Selector input — customize the CSS selector name for the output.
Unrecognized tracking — classes without a mapping are flagged so you can handle them manually.
Everything runs in your browser — no data is sent over the network.

Understanding the Spacing Scale

Tailwind uses a numeric scale where 1 = 0.25rem (4px), 2 = 0.5rem (8px), 4 = 1rem (16px), and so on. The scale covers values from 0 to 96 (24rem). Special values include 'px' (1px), 'auto', 'full' (100%), 'screen' (100vw/vh), and fractional values like '1/2' (50%).

/* p-4 */
padding: 1rem; /* 16px */

/* mx-auto */
margin-left: auto;
margin-right: auto;

/* gap-6 */
gap: 1.5rem; /* 24px */

/* w-1/2 */
width: 50%;

/* h-screen */
height: 100vh;

Directional Spacing

Tailwind provides axis-specific shortcuts: px/py for horizontal/vertical padding, mx/my for margins, and individual sides (pt, pr, pb, pl, mt, mr, mb, ml). The space-x and space-y utilities add margin between child elements using the > * + * selector.

/* px-4 py-2 */
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;

/* space-y-4 → applies to > * + * */
margin-top: 1rem;

Arbitrary Spacing Values

When the default scale doesn't fit, use bracket notation: p-[13px], m-[2.5rem], gap-[clamp(1rem,3vw,2rem)]. The converter handles arbitrary values and outputs them as-is in the CSS.

Frequently Asked Questions

What does p-4 equal in CSS?

p-4 equals padding: 1rem (16px). Each unit in Tailwind's spacing scale is 0.25rem, so 4 × 0.25rem = 1rem.

How do I center an element with Tailwind?

Use mx-auto for horizontal centering (margin-left: auto; margin-right: auto;). For flexbox centering, combine flex items-center justify-center.

Related Convert Tools

CSS to Tailwind Converter

Convert CSS to Tailwind utility classes instantly — 100+ properties including layout, spacing, typography, borders, and effects

SVG

SVG to JSX Converter

Convert SVG to JSX or a React/TypeScript component — camelCase attributes, style objects, forwardRef, memo, props spread

API

OpenAPI to TypeScript

Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types

ZOD

JSON to Zod Converter

Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields