px ↔ rem ↔ em ↔ pt & Tailwind Spacing
runs in your browserConvert px, rem, em, %, pt and print units at any root or parent font size, and map a length onto Tailwind’s spacing grid, text sizes, tracking and breakpoints.
1rem = 16px, which is html { font-size: 100% }. Absolute units follow the CSS specification: 96px to the inch, 72pt to the inch, 1pt = 1.333px.
Reference at 16px root
| px | rem | pt | spacing | text |
|---|---|---|---|---|
| 1 | 0.0625 | 0.75 | p-px | |
| 2 | 0.125 | 1.5 | p-0.5 | |
| 4 | 0.25 | 3 | p-1 | |
| 6 | 0.375 | 4.5 | p-1.5 | |
| 8 | 0.5 | 6 | p-2 | |
| 10 | 0.625 | 7.5 | p-2.5 | |
| 12 | 0.75 | 9 | p-3 | text-xs |
| 14 | 0.875 | 10.5 | p-3.5 | text-sm |
| 16 | 1 | 12 | p-4 | text-base |
| 18 | 1.125 | 13.5 | p-4.5 | text-lg |
| 20 | 1.25 | 15 | p-5 | text-xl |
| 24 | 1.5 | 18 | p-6 | text-2xl |
| 28 | 1.75 | 21 | p-7 | |
| 32 | 2 | 24 | p-8 | |
| 36 | 2.25 | 27 | p-9 | text-4xl |
| 40 | 2.5 | 30 | p-10 | |
| 48 | 3 | 36 | p-12 | text-5xl |
| 56 | 3.5 | 42 | p-14 | |
| 64 | 4 | 48 | p-16 | |
| 72 | 4.5 | 54 | p-18 | text-7xl |
| 80 | 5 | 60 | p-20 | |
| 96 | 6 | 72 | p-24 | text-8xl |
| 128 | 8 | 96 | p-32 | text-9xl |
about this tool
Through pixels
Every length is converted through CSS pixels. The absolute units are fixed
by the specification — 96px to the inch, 72pt to the inch, 12pt to the pica,
2.54cm to the inch, four Q to the millimetre — so 12pt is exactly 16px and
1pt is 1.333px, whatever the screen. rem multiplies by the root font size,
em and % by the parent's; both are fields you can set, with the parent
following the root until you unlink them. The root field also shows the
percentage it corresponds to in the old html { font-size: 62.5% } idiom,
which makes 1rem a round 10px.
A bare number is taken as px and the tool says so. Units that need
information it does not have — vw and vh (the viewport), ch and ex
(the typeface's glyphs), lh (the element's line height) — are refused with
the reason rather than guessed.
Tailwind
Tailwind v4's spacing grid is 0.25rem a step: at a 16px root, 4px. A length
on the grid is written as its step (p-4, gap-1.5), and the tool
distinguishes steps in the classic named scale from ones v4 generates on
demand (w-13 works in v4; v3 needed the theme extended). One pixel has its
own utility, p-px, outside the rem grid. Anything else is an arbitrary
value, p-[5px], and the note says how many steps off it is. The utility
prefix is selectable; the number is the same for padding, margin, gap, width,
height, inset and the rest.
Font sizes are matched against the v4 scale (text-xs 0.75rem through
text-9xl 8rem) with each step's default line height; a length between
steps gets the nearest one, how far off it is, and the arbitrary form. Letter
spacing is on an em scale, so a px value is converted through the parent font
size — tracking-wide is 0.025em, 0.4px on 16px text. Widths of 320px and up
are also read as viewport widths against the breakpoints, which are in rem
(sm 40rem, md 48rem, lg 64rem, xl 80rem, 2xl 96rem) and therefore
move when the root font size does.
The reference table
Twenty-three common pixel sizes with their rem, pt, spacing class and — where one matches exactly — text-size class, recalculated for the root you set, so the table for a 10px root is a different table. Copy it as tab-separated text.
Limits
The converter knows nothing about the viewport, the typeface or the element,
so viewport, glyph and line-height units are out of scope. Tailwind mappings
cover the default theme; a customised --spacing or text scale is not read.
Nothing is stored.
For the pixel dimensions themselves, the aspect ratio & resolution calculator works them out. To tidy the declarations once written, CSS formatter & minifier.
questions
- How do I convert px to rem?
- Divide by the root font size, which is 16px unless the html element sets another: 24px is 1.5rem, 14px is 0.875rem, 18px is 1.125rem. If a stylesheet uses html { font-size: 62.5% } the root is 10px and 24px becomes 2.4rem — set the root field and every figure follows.
- What is the difference between rem and em?
- rem is relative to the root (html) font size and is the same everywhere in the document. em is relative to the font size of the element’s parent, so it compounds: 1.2em inside 1.2em is 1.44 times the outer size. Use rem for layout and type scales, em for things that should grow with their own text, such as padding on a button.
- How many px is a pt?
- CSS fixes 96px to the inch and 72pt to the inch, so 1pt is 1.333px and 12pt is exactly 16px. These are CSS pixels, a unit of measure, not device pixels: on a high-density screen one CSS pixel spans several physical ones.
- How do Tailwind spacing numbers relate to pixels?
- Each step is 0.25rem — 4px at the default root — so p-4 is 1rem (16px), gap-1.5 is 6px and w-96 is 24rem (384px). Tailwind v4 accepts any multiple of 0.25rem (p-13 works), while values off the grid need an arbitrary value such as p-[5px]. The one-pixel step is p-px.
- Which Tailwind text size is 14px?
- text-sm, which is 0.875rem with a default line height of 1.25rem. The scale runs text-xs (12px) through text-9xl (128px) at the default root; a size between steps, such as 15px, has no class and is written text-[0.9375rem]. The tool names the nearest step and how far off you are.