Pixels
16.00
Root EM
1
EM
1
Points
12.00
Viewport Width
0.8333
Viewport Height
1.4815
Spacing / Sizing
p-4m-4w-4h-4gap-4Font Size
text-baseHighlighted in purple = exact match. Amber note = nearest approximation.
| px | rem | pt | Tailwind Token | Classes |
|---|---|---|---|---|
| 2 | 0.125 | 1.5 | 0.5 | p-0.5, m-0.5 |
| 4 | 0.25 | 3 | 1 | p-1, m-1 |
| 6 | 0.375 | 4.5 | 1.5 | p-1.5, m-1.5 |
| 8 | 0.5 | 6 | 2 | p-2, m-2 |
| 10 | 0.625 | 7.5 | 2.5 | p-2.5, m-2.5 |
| 12 | 0.75 | 9 | 3 | p-3, m-3 |
| 14 | 0.875 | 10.50 | 3.5 | p-3.5, m-3.5 |
| 16 | 1 | 12.00 | 4 | p-4, m-4 |
| 18 | 1.125 | 13.50 | 4(16px) | p-4, m-4 |
| 20 | 1.25 | 15.00 | 5 | p-5, m-5 |
| 24 | 1.5 | 18.00 | 6 | p-6, m-6 |
| 28 | 1.75 | 21.00 | 7 | p-7, m-7 |
| 32 | 2 | 24.00 | 8 | p-8, m-8 |
| 36 | 2.25 | 27.00 | 9 | p-9, m-9 |
| 40 | 2.5 | 30.00 | 10 | p-10, m-10 |
| 48 | 3 | 36.00 | 12 | p-12, m-12 |
| 56 | 3.5 | 42.00 | 14 | p-14, m-14 |
| 64 | 4 | 48.00 | 16 | p-16, m-16 |
| 80 | 5 | 60.00 | 20 | p-20, m-20 |
| 96 | 6 | 72.00 | 24 | p-24, m-24 |
px / baseFontSizerem * baseFontSizepx * 0.75pt / 0.75(px / viewportW) * 100(px / viewportH) * 100CSS units define measurements for sizes, positions, and spacing. Absolute units like px and pt are device-pixel-independent at a defined resolution. Relative units like rem, em, vw, and vh scale with context — the root font size, parent font size, or viewport dimensions respectively. The shift from pixel-based design to relative units is fundamental to accessible, responsive web design: rem-based font sizes respect user font-size preferences set in browser settings, while vw/vh layouts adapt to any screen size.
Conversion between units is performed using simple arithmetic derived from the CSS specification relationships. For px to rem: divide by the configured base font size (default 16px). For rem to px: multiply by the base font size. For px to vw: divide by the viewport width and multiply by 100. For px to em: divide by the parent element's font size.
The Tailwind equivalent lookup searches Tailwind v4's compiled default theme. Tailwind's spacing scale uses a 4px base unit where each scale step equals 4px (scale-4 = 16px, scale-8 = 32px). Font sizes use a separate named scale (text-sm = 14px, text-base = 16px, text-lg = 18px). The tool computes the distance from your px value to each Tailwind scale step and returns the nearest match.
The bulk reference table generates a complete conversion table for all values from 1px to 96px (the Tailwind spacing scale maximum), rendered in a scrollable grid with all unit types in columns. This serves as a quick print-or-bookmark reference.
A developer converting a Figma design with pixel values to a rem-based React component converts every spacing value in one session using the bulk reference table.
A frontend engineer translating a Tailwind prototype to vanilla CSS converts each spacing utility class to the corresponding px or rem value.
A developer building a viewport-adaptive hero section converts a designer-specified 80px font size to its vh equivalent for the configured 1440px breakpoint.
A developer checking WCAG large text compliance converts 18pt and 14pt to their pixel equivalents to verify which text elements qualify for the lower 3:1 contrast threshold.
Enter a value and select the source unit (px, rem, em, pt, vw, vh)
See all equivalent values across every CSS unit instantly
Check the Tailwind CSS section for the nearest spacing and font-size class
Use the bulk reference table for quick lookups of common values
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29