1. Enter a value
Type a number in the input field. You can use a period or comma as the decimal separator.
Convert Tailwind units to pixels
This converter converts Tailwind CSS spacing values to pixel equivalents. Enter a value and the result appears instantly.
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
How many px is p-6? Answer: 24 px (1.5 rem).Figma Conversion
Design in px → matching Tailwind classes.Pixel-perfect
Match the layout to the required graphic design.Designer Collaboration
The designer provides px, the developer needs Tailwind classes.
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.
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 px
Explore other unit converters
Frequently asked questions
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.