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.
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.
Supported CSS Properties
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
SVG to JSX Converter
Convert SVG to JSX or a React/TypeScript component — camelCase attributes, style objects, forwardRef, memo, props spread
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
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
GraphQL to TypeScript
Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, unions, and operations