28px to rem

28px is 1.75rem at the browser’s default 16px root: 28 ÷ 16 = 1.75. Under a 16px parent it’s 1.75em; it’s also 21pt (CSS fixes 1pt at 4/3 px) and 175% as a font-size percentage.

At other root sizes

root 16px (default)    28px = 1.75rem
root 10px (62.5%)      28px = 2.8rem
root 18px (112.5%)     28px = 1.5556rem

At 18px the rounded 1.5556rem is 28.0008px; calc(28rem / 18) is exact.

Not a Tailwind font size

Tailwind CSS v4’s type scale jumps from text-2xl (1.5rem, 24px) to text-3xl (1.875rem, 30px), so 28px has no class. text-[1.75rem] works once, but it sets only the font size and leaves the line height inherited. When the size recurs, put it in the theme with its own line height:

@theme {
  --text-heading: 1.75rem;
  --text-heading--line-height: 2.25rem;
}
/* class="text-heading" */

28px is on the spacing scale (--spacing: 0.25rem): p-7, gap-7 and h-7 are 1.75rem. It’s also a line height Tailwind already uses: text-lg and text-xl both set 28px, and leading-7 is 1.75rem.

Why rem and not px

A reader who raises the browser’s default font size to 20px gets 1.75rem at 35px; 28px stays 28px. Zoom scales both, so only rem honors that setting.

In Sass and CSS

@use 'sass:math';
font-size: math.div(28px, 16px) * 1rem; // 1.75rem

font-size: calc(28rem / 16); /* 1.75rem */