CSS / Tailwind Scale Converter

Classes: '+v.join(" · ")+"
Fluid CSS: font-size: "+s+";
Fluid Tailwind: text-["+s+"]

Set a base font size. Convert a CSS length into rem/em, the nearest Tailwind spacing or type class, and a fluid clamp() in one pass.

CSS / Tailwind unit & scale converter

px, rem, em, nearest Tailwind class, and a fluid clamp() from one base size.

Base font size (px) html font-size. Tailwind default is 16. Parent font (px), for em Value 16px, 1.5rem, 24, p-4, or text-xl Treat as Fluid min viewport (px) Fluid max viewport (px) Fluid min size (px) Defaults to the converted px when you generate. Fluid max size (px)

Tailwind v3 default spacing (4px steps) and font-size ladder. Custom theme.extend will not match.

Why px → rem is not the job

A converter that only divides by 16 is a calculator. Design tokens are a scale: Tailwind spacing is 0.25rem steps, type is a named ladder (text-sm … text-5xl), and fluid type is a clamp() between two viewports — not a single rem.

This page does the three outputs together. If 17px is not on the scale, you get the nearest class and the arbitrary value (p-[17px], text-[1.0625rem]). clamp() uses your min/max font and min/max viewport; the preferred middle is the linear interpolation those four numbers define.

Tailwind v3 default spacing and font-size maps. If your theme.extend renamed the scale, treat the class as a hint and keep the rem.