Tailwind CSS Font Sizes and REM — How Tailwind Handles Typography Units

Tailwind CSS uses rem for all font sizes, based on a 16px browser default. Understanding how Tailwind’s type scale maps to px values helps you match designs precisely.

Convert between px and rem with the PX to REM Converter.

Tailwind’s default font size scale

text-xs     → font-size: 0.75rem  (12px)
text-sm     → font-size: 0.875rem (14px)
text-base   → font-size: 1rem     (16px)  ← default body text
text-lg     → font-size: 1.125rem (18px)
text-xl     → font-size: 1.25rem  (20px)
text-2xl    → font-size: 1.5rem   (24px)
text-3xl    → font-size: 1.875rem (30px)
text-4xl    → font-size: 2.25rem  (36px)
text-5xl    → font-size: 3rem     (48px)
text-6xl    → font-size: 3.75rem  (60px)
text-7xl    → font-size: 4.5rem   (72px)
text-8xl    → font-size: 6rem     (96px)
text-9xl    → font-size: 8rem     (128px)

Each size also sets a default line-height:

text-xs   → line-height: 1rem
text-sm   → line-height: 1.25rem
text-base → line-height: 1.5rem
text-xl   → line-height: 1.75rem
text-5xl+ → line-height: 1

Arbitrary rem values

<!-- Use brackets for values not in the default scale: -->
<p class="text-[0.9375rem]">   <!-- 15px equivalent -->
<p class="text-[1.0625rem]">   <!-- 17px equivalent -->
<p class="text-[2rem]">        <!-- 32px equivalent -->

<!-- CSS variable: -->
<p class="text-[var(--custom-size)]">

Override line-height independently

<!-- text-lg with tighter line-height: -->
<p class="text-lg leading-5">      <!-- 18px size, 20px line-height -->
<p class="text-lg leading-tight">  <!-- line-height: 1.25 -->
<p class="text-lg leading-7">      <!-- line-height: 1.75rem = 28px -->

<!-- Available leading-* values: -->
<!-- leading-3 = 0.75rem | leading-4 = 1rem | leading-5 = 1.25rem -->
<!-- leading-6 = 1.5rem  | leading-7 = 1.75rem | leading-8 = 2rem -->
<!-- leading-none = 1 | leading-tight = 1.25 | leading-snug = 1.375 -->
<!-- leading-normal = 1.5 | leading-relaxed = 1.625 | leading-loose = 2 -->

Customize the type scale in tailwind.config.js

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      fontSize: {
        // Add custom sizes:
        '2xs': ['0.625rem', { lineHeight: '1rem' }],  // 10px
        '4.5xl': ['2.5rem', { lineHeight: '1.15' }],   // 40px
        
        // Override existing:
        'base': ['1.0625rem', { lineHeight: '1.6' }],  // 17px (common in designs)
      },
    },
  },
};

Set a custom base font size

Some designers use a 10px base (62.5% trick) for easy px-to-rem mental math:

/* In your global CSS: */
html {
  font-size: 62.5%;  /* 10px base: 1rem = 10px */
}

body {
  font-size: 1.6rem; /* Reset to 16px for body text */
}

But if you use this with Tailwind, Tailwind’s rem values become wrong (1rem = 10px, not 16px). You’d need to adjust all Tailwind values.

Better approach: Keep the default 16px base and use Tailwind’s scale as-is. Memorize the key conversions:

• text-sm = 14px
• text-base = 16px
• text-lg = 18px
• text-xl = 20px

Responsive typography with Tailwind

<!-- Different sizes at different breakpoints: -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>

<p class="text-sm md:text-base lg:text-lg">
  Body text that scales with viewport
</p>

Fluid typography with Tailwind v3.3+ clamp

<!-- Using arbitrary values for clamp(): -->
<h1 class="text-[clamp(1.5rem,5vw,3rem)]">
  Fluidly scales from 24px to 48px
</h1>

// Or add to tailwind.config.js:
fontSize: {
  'fluid-heading': ['clamp(1.5rem, 5vw, 3rem)', { lineHeight: '1.2' }],
}

px to Tailwind class reference

Related tools

• PX to REM Converter — convert px values to rem
• Color Picker — match Tailwind color values
• CSS Grid Generator — build Tailwind grid layouts