How to Calculate PX to REM for Tailwind CSS & Bootstrap Grid Layouts

Modern front-end frameworks like Tailwind CSS and Bootstrap 5 rely heavily on relative REM (rem) units for spacing, typography, and responsive grid layouts.

However, UI designers usually export design assets from Figma, Sketch, or Adobe XD in absolute pixels (px). This leaves front-end engineers with a continuous workflow challenge: how do you translate pixel-based design specifications into framework-compliant REM values accurately?

In this practical guide, we will explore how Tailwind CSS and Bootstrap compute REM units, analyze the famous 62.5% root font-size trick, and demonstrate how to convert pixel mockups into clean framework code.

1. How Tailwind CSS Calculates REM Units

Tailwind CSS uses a default spacing scale based on a 4px (0.25rem) grid step system, assuming a standard root browser font size of 16px.

In Tailwind, numeric utility classes correlate to REM values according to the formula:

$$\text{Tailwind Value} = \frac{\text{Target Pixels (px)}}{4}$$

$$\text{Computed REM} = \frac{\text{Tailwind Value}}{4} = \frac{\text{Target Pixels (px)}}{16}$$

Tailwind CSS Spacing & Typography Reference Table

| Target Pixels (px) | Tailwind Utility Class | Computed REM Value | CSS Output | | :--- | :--- | :--- | :--- | | 4px | p-1, m-1, w-1 | 0.25rem | font-size: 0.25rem; | | 8px | p-2, m-2, w-2 | 0.5rem | font-size: 0.5rem; | | 12px | p-3, m-3, text-xs | 0.75rem | font-size: 0.75rem; | | 16px | p-4, m-4, text-base | 1rem | font-size: 1rem; | | 20px | p-5, m-5, text-xl | 1.25rem | font-size: 1.25rem; | | 24px | p-6, m-6, text-2xl | 1.5rem | font-size: 1.5rem; | | 32px | p-8, m-8, text-3xl | 2rem | font-size: 2rem; | | 48px | p-12, m-12, text-5xl | 3rem | font-size: 3rem; |

Custom Arbitrary Values in Tailwind v3 & v4

If your Figma mockup specifies an unstandardized spacing value (for example, 19px or 27px), you can pass arbitrary values directly in Tailwind:

<!-- Tailwind Arbitrary REM Values -->
<div className="p-[1.1875rem] text-[1.6875rem]">
  Custom Spacing Box (19px padding, 27px font size)
</div>

2. The 62.5% Root Font-Size Trick Explained

Converting pixel values by dividing by 16 ($24/16 = 1.5$, $14/16 = 0.875$) often requires mental math or external calculator tools.

To simplify this math, developers historically introduced the 62.5% root font-size trick:

/* Custom CSS Reset */
html {
  font-size: 62.5%; /* Reduces default 16px to 10px (16 * 0.625 = 10) */
}

body {
  font-size: 1.6rem; /* 1.6 * 10px = 16px */
}

Why Does the 62.5% Trick Work?

By setting the root <html> font size to 62.5%, you effectively scale the browser's default 16px baseline down to 10px:

$$\text{Default Root Size} = 16\text{px} \times 0.625 = 10\text{px}$$

With a 10px base, converting pixels to REM becomes trivial—you simply divide by 10 by moving the decimal point one place to the left!

16px = 1.6rem
24px = 2.4rem
32px = 3.2rem
14px = 1.4rem

⚠️ Warning: Why You Should Avoid 62.5% in Frameworks

While the 62.5% trick simplifies manual CSS math, it breaks pre-configured utility frameworks like Tailwind CSS and Bootstrap!

Both Tailwind and Bootstrap assume that 1rem equals 16px. If you apply html { font-size: 62.5%; } to a Tailwind project, all default classes (text-base, p-4, max-w-4xl) will shrink by 37.5%, destroying layout spacing across your site.

3. How Bootstrap 5 Handles REM Scaling & RFS

Unlike Tailwind's utility-first classes, Bootstrap 5 uses native REM units combined with RFS (Responsive Font Sizes).

Bootstrap 5 sets the base $font-size-root variable to 16px:

// Bootstrap 5 SCSS Variables
$font-size-base: 1rem; // 16px
$h1-font-size: $font-size-base * 2.5; // 40px (2.5rem)
$h2-font-size: $font-size-base * 2; // 32px (2rem)
$h3-font-size: $font-size-base * 1.75; // 28px (1.75rem)

Bootstrap automatically scales font sizes down on mobile viewports using media queries generated by RFS, preventing large 40px titles from overflowing small mobile screens.

4. Converting Figma Mockups to Code Efficiently

When translating design files into code, follow these steps:

Keep Root Size at 16px: Maintain standard browser defaults for accessibility compliance.
Use Tailwind Spacing Multiples: Match pixel inputs to Tailwind's 4px scale (8px = p-2, 16px = p-4, 24px = p-6).
Use Accurate Conversions for Custom Values: When dealing with non-standard dimensions, compute exact 4-decimal REM values ($15\text{px} = 0.9375\text{rem}$) to prevent sub-pixel rendering bugs.

Streamline Your Front-End Workflow

Writing custom utility classes for Tailwind or Bootstrap? Use our free Case Converter to format string tokens, or test your root font math in real time using our client-side PX to REM Calculator!