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

Tailwind Spacing Classes — Padding & Margin Reference

Tailwind uses a consistent spacing scale for padding, margin, gap, width, and height utilities. Paste your CSS into the converter above to instantly map px and rem values to Tailwind classes.

← Back to tools

CSS to Tailwind Converter

Paste CSS rules or inline styles and get the equivalent Tailwind CSS utility classes. Supports 100+ CSS properties including layout, spacing, typography, borders, and more.

Samples:

CSS Input

Tailwind Output

Paste CSS to see Tailwind classes

Supported CSS Properties

Layout

display, position, top/right/bottom/left, inset, z-index, overflow, visibility, box-sizing

Flexbox

flex-direction, flex-wrap, flex, flex-grow, flex-shrink, order, justify-content, align-items, align-self, align-content

Grid

grid-template-columns, grid-template-rows, gap, row-gap, column-gap, place-content, place-items

Spacing

padding (all sides), margin (all sides), width, height, min/max width/height

Typography

font-size, font-weight, font-style, font-family, line-height, letter-spacing, text-align, text-decoration, text-transform, white-space, word-break, text-overflow, vertical-align

Colors

color, background-color, border-color (named + hex black/white)

Borders

border, border-width, border-style, border-radius, outline, outline-offset

Effects

opacity, box-shadow, cursor, pointer-events, user-select, transition, transform, mix-blend-mode, will-change

Misc

object-fit, object-position, aspect-ratio, resize, appearance, scroll-behavior, list-style, table-layout, border-collapse, columns, content, isolation, accent-color

About CSS to Tailwind Converter

100+ properties — converts layout, spacing, typography, borders, effects, and more.
Full selectors — handles class rules, ID rules, or bare inline style declarations.
Shorthand parsing — expands padding, margin, and border shorthands into individual Tailwind classes.
Unconverted tracking — properties without a direct Tailwind equivalent are flagged so you know what needs custom CSS.
Everything runs in your browser — no data is sent over the network.

How Tailwind Spacing Works

Tailwind's spacing scale maps numbers to rem values: 1 = 0.25rem (4px), 2 = 0.5rem (8px), 4 = 1rem (16px), 8 = 2rem (32px), etc. Padding uses p- (all sides), px- (horizontal), py- (vertical), pt/pr/pb/pl- (individual sides). Margin uses the same pattern with m- instead of p-. The scale goes from 0 to 96, plus special values like px (1px) and auto.

CSS Shorthand to Tailwind

CSS shorthand like 'padding: 1rem 2rem' (vertical horizontal) converts to 'py-4 px-8' in Tailwind. Four-value shorthand 'margin: 0 auto 2rem 0' maps to 'mt-0 mx-auto mb-8 ml-0'. The converter handles all shorthand variants — 1 value (all sides), 2 values (vertical/horizontal), and 4 values (top/right/bottom/left).

Negative Spacing

Tailwind supports negative margin with a dash prefix: -mt-4, -mx-2, -mb-8. Negative padding is not supported in Tailwind because negative padding has no valid CSS use case. The converter automatically maps negative margin values like 'margin-top: -1rem' to '-mt-4'.

Frequently Asked Questions

What Tailwind class is 16px padding?

16px = 1rem = p-4 in Tailwind. For horizontal only: px-4. For vertical only: py-4. For individual sides: pt-4, pr-4, pb-4, pl-4.

How do I center with margin auto in Tailwind?

'margin: 0 auto' converts to 'mx-auto' in Tailwind. This is the standard pattern for centering block elements. Add my-0 if you want to explicitly set vertical margin to zero.

What if my spacing value is not in Tailwind's scale?

Use arbitrary values with bracket notation: p-[13px], m-[1.125rem], gap-[7px]. This works for any CSS value but should be used sparingly — prefer the built-in scale when possible for consistency.

Related Convert Tools

SQL

SQL to TypeScript/Prisma/Drizzle

Convert SQL CREATE TABLE statements to TypeScript interfaces, Prisma schema, and Drizzle ORM definitions for PostgreSQL, MySQL, and SQLite

BIO

ESLint to Biome Converter

Convert your ESLint config to Biome — maps 100+ rules from core, TypeScript, React, JSX-A11y, and import plugins to biome.json

B64

Base64 Codec

Encode and decode Base64 strings with Unicode support

CLR

Color Converter

Convert colors between HEX, RGB, and HSL formats