1. Enter a value
Type a number in the input field. You can use a period or comma as the decimal separator.
Convert Tailwind spacing to px – p-4, w-48, gap-8 values
Each Tailwind unit equals 4px at default root. p-6 = 24px, w-48 = 192px, gap-8 = 32px — look up any class without switching tabs.
ADVERTISEMENT
ADVERTISEMENT
Loading tool editor...
When do you need to convert Tailwind units to pixels?
Tailwind CSS uses a spacing scale where each unit = 0.25 rem = 4 px (at default 16px root). So p-4 = 1 rem = 16 px, p-8 = 2 rem = 32 px, w-64 = 16 rem = 256 px.
This converter helps developers quickly translate Tailwind spacing values to exact pixel measurements for debugging, design handoff, and documentation.
Tailwind also has special values: 0.5 = 2px, 1.5 = 6px, 2.5 = 10px, 3.5 = 14px, and named sizes like full = 100%, screen = 100vw.
All calculations run locally in your browser — nothing is sent to any server.
How to use the converter?
2. Read the result
The conversion result appears instantly in the field next to it – no clicking required.3. Copy or reverse
Click Copy result or use the Reverse button to convert in the opposite direction.
When is this converter useful?
CSS debugging and class lookup
During development you often need to confirm: how many pixels is gap-6? Is max-w-md wider than 400px? Instead of opening Tailwind docs and scrolling, type the class number here and get the answer in one second. p-6 = 24px, gap-6 = 24px, max-w-md = 448px.Figma to Tailwind design handoff
Figma designs are specified in pixels. When converting a design to Tailwind, you need to find the nearest spacing token. A 32px gap in Figma maps to gap-8 in Tailwind (8 × 4px = 32px). This tool lets you verify the reverse — type the class, confirm the pixel value matches the spec.Component sizing with shadcn/ui
shadcn/ui components use Tailwind spacing tokens for height, padding, and radius. A standard button uses h-10 (40px), px-4 (16px), py-2 (8px). When you need to override or extend these for a custom design, knowing the exact pixel equivalent prevents layout shifts.Custom spacing configuration
When you extend the Tailwind spacing scale in tailwind.config.js under theme.extend.spacing, you define new tokens like spacing['4.5'] = '18px'. This converter helps verify that your custom values align with the existing 4px grid and do not create rounding inconsistencies across components.
What makes this converter different?
Complete privacy
All calculations run locally in your browser. No data is sent to any server.Real-time results
The result updates instantly as you type – no need to click any button.Bidirectional conversion
The Reverse button lets you convert in both directions with one click.Reference table
A ready-made table with commonly converted values and contextual descriptions.
How does Tailwind spacing work?
Tailwind spacing = value × 0.25 rem. At 16px root: spacing × 4 = pixels.
p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px, p-16 = 64px, p-32 = 128px, p-64 = 256px.
Font sizes use different values: text-sm = 14px, text-base = 16px, text-lg = 18px, text-xl = 20px, text-2xl = 24px.
Practical tips
- Spacing: p-1 = 4px, p-2 = 8px, p-3 = 12px, p-4 = 16px, p-6 = 24px, p-8 = 32px.
- Width: w-1 = 4px, w-4 = 16px, w-12 = 48px, w-24 = 96px, w-48 = 192px, w-64 = 256px.
- Breakpoints: sm ≥ 640px, md ≥ 768px, lg ≥ 1024px, xl ≥ 1280px.
- Max-width: max-w-sm = 384px, max-w-md = 448px, max-w-lg = 512px, max-w-xl = 576px.
ADVERTISEMENT
Tailwind spacing scale
| Tailwind | rem | px (at 16px root) |
|---|---|---|
| 1 | 0.25rem | 4px |
| 4 | 1rem | 16px |
| 8 | 2rem | 32px |
| 16 | 4rem | 64px |
| 64 | 16rem | 256px |
rem
- 1
0.25rem - 4
1rem - 8
2rem - 16
4rem - 64
16rem
px (at 16px root)
- 1
4px - 4
16px - 8
32px - 16
64px - 64
256px
Convert other units to Pixels
Explore other unit converters
Frequently asked questions
What is p-4 in pixels?
p-4 = 1rem = 16px at the default root font size of 16px. The Tailwind spacing formula is: px = unit × 4. So p-4 = 4 × 4 = 16px, p-8 = 32px, p-12 = 48px.
How do Tailwind spacing units work?
Each spacing unit = 0.25rem. At 16px root, multiply by 4 to get pixels. p-6 = 6 × 4 = 24px, w-24 = 24 × 4 = 96px, gap-2 = 2 × 4 = 8px. Tailwind also has half-unit values: p-0.5 = 2px, p-1.5 = 6px, p-2.5 = 10px.
What are Tailwind breakpoints in pixels?
Tailwind v3/v4 default breakpoints: sm = 640px, md = 768px, lg = 1024px, xl = 1280px, 2xl = 1536px. These are min-width breakpoints, so md:p-4 applies at 768px and above.
Can I customize the Tailwind spacing scale?
Yes. In tailwind.config.js under theme.spacing (to fully replace the default scale) or theme.extend.spacing (to add new values while keeping defaults). JIT mode in Tailwind v3+ also supports arbitrary values like p-[13px] without config changes.
What are the most common Tailwind spacing values I should know?
p-1 = 4px, p-2 = 8px, p-3 = 12px, p-4 = 16px, p-5 = 20px, p-6 = 24px, p-8 = 32px, p-10 = 40px, p-12 = 48px, p-16 = 64px, p-20 = 80px, p-24 = 96px, p-32 = 128px, p-48 = 192px, p-64 = 256px.
How do I convert Figma spacing values to Tailwind classes?
Divide the Figma pixel value by 4 to get the Tailwind unit. 32px / 4 = 8, so use p-8 or gap-8 or m-8. If the value does not divide evenly (e.g. 14px), use the closest token (p-3 = 12px or p-4 = 16px) or an arbitrary value: p-[14px].
Does Tailwind use rem or px internally?
Tailwind v3 uses rem for all spacing and font sizes internally. 1 unit = 0.25rem. At 16px root: 1 unit = 4px. If you change the root font size, all Tailwind rem values shift accordingly — which is why this converter accepts a custom base size.
Are calculations done locally?
Yes. All calculations run in your browser. No data is sent to any server.
Help us improve our tools
Have an idea, found a bug, or want to suggest a feature? Drop us a message – we respond within 24 hours.