CSS Unit Converter

Convert px, rem, em, vh, vw with Tailwind equivalents

DeveloperFREEYour data never leaves your browser

100% freeNo signupRuns in your browser

Built by WOWHOW Team · 14+ yrs engineering

CSS Unit Converter is a free, browser-based tool that lets you convert px, rem, em, vh, vw with tailwind equivalents — with zero signup, zero installation. Your data never leaves your browser. Part of 138+ free developer and business tools at wowhow.cloud, built and maintained by a team with 14+ years of hands-on development experience.

TOOLCSS Unit Converter

Input Value

Value

From Unit

Context Settings

Base Font Size(for rem / em)

Viewport Width(vw)

Viewport Height(vh)

All Conversions

Pixels

16.00

rem

Root EM

Points

12.00

Viewport Width

0.8333

Viewport Height

1.4815

Tailwind CSS Equivalents

16.00px

Spacing / Sizing

p-4

m-4

w-4

h-4

gap-4

Font Size

text-base

Highlighted in purple = exact match. Amber note = nearest approximation.

Bulk Reference Table

Base: 16px

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

Conversion Formulas

px → rempx / baseFontSize

rem → pxrem * baseFontSize

px → ptpx * 0.75

pt → pxpt / 0.75

px → vw(px / viewportW) * 100

px → vh(px / viewportH) * 100

About CSS Unit Converter

CSS 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.

How It Works

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.

Who Is This For

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.

How to Use

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

Frequently Asked Questions

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.