Loading…
Loading…
Convert px, rem, em, vh, vw with Tailwind equivalents
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) * 100Run your projects on Claude Code?
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 — $29CSS 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
About the CSS Unit Converter
The default is 16px (the browser default). You can change it to match your project's root font size for accurate conversions.
The tool maps your px value to the nearest class in Tailwind's default spacing scale (0 to 96) and font-size scale (text-xs to text-5xl). Exact matches are highlighted.
All conversions happen in your browser. Nothing is sent to any server.
rem (root em) is always relative to the root element font-size (typically 16px on the html element). em is relative to the font-size of the nearest parent element that sets a font-size, which makes it context-dependent and can compound across nested elements. rem is generally preferred for consistent spacing; em is useful for components that should scale with their container font-size.
vw and vh require a reference viewport size. Enter your target viewport dimensions (e.g., 1440px wide, 900px tall) in the viewport size fields. 1vw will then equal 1% of the entered width. The bulk reference table shows all common values pre-computed for the specified viewport.
Point (pt) is a unit from print typography: 1pt = 1/72 of an inch. In CSS, 1pt = 1.333px at 96 DPI screen resolution. It is occasionally used in media queries (e.g., WCAG defines large text as 18pt or 14pt bold) and in print stylesheets. For screen design, px and rem are always preferred.
Tailwind's default spacing scale maps specific px values to numeric scale keys (e.g., 16px = 4 in the spacing scale, which maps to p-4, m-4, w-4, etc.). Font sizes are separate. Enter your pixel value and the tool highlights the exact Tailwind class if the value matches a scale step, or shows the two nearest classes if it falls between steps.
Builder/critic agent prompts with brakes built in
Open →DeveloperFormat, validate & diff JSON — runs entirely in browser
Open →DeveloperTest regex live — railroad diagrams + plain English explained
Open →DeveloperOne color in, full design system out
Open →