Tailwind font size generator: type scale for v4 and v3

10px · 0.625rem
line 16px Ship the theme on Friday
13px · 0.8125rem
line 20px Ship the theme on Friday
16px · 1rem
line 24px Ship the theme on Friday
20px · 1.25rem
line 28px Ship the theme on Friday
25px · 1.5625rem
line 32px Ship the theme on Friday
31px · 1.9375rem
line 40px Ship the theme on Friday
39px · 2.4375rem
line 44px Ship the theme on Friday
49px · 3.0625rem
line 49px Ship the theme on Friday
61px · 3.8125rem
line 61px Ship the theme on Friday
76px · 4.75rem
line 76px Ship the theme on Friday

@import "tailwindcss";

@theme {
  --text-xs: 0.625rem;
  --text-xs--line-height: calc(1 / 0.625);
  --text-sm: 0.8125rem;
  --text-sm--line-height: calc(1.25 / 0.8125);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.25rem;
  --text-lg--line-height: calc(1.75 / 1.25);
  --text-xl: 1.5625rem;
  --text-xl--line-height: calc(2 / 1.5625);
  --text-2xl: 1.9375rem;
  --text-2xl--line-height: calc(2.5 / 1.9375);
  --text-3xl: 2.4375rem;
  --text-3xl--line-height: calc(2.75 / 2.4375);
  --text-4xl: 3.0625rem;
  --text-4xl--line-height: 1;
  --text-5xl: 3.8125rem;
  --text-5xl--line-height: 1;
  --text-6xl: 4.75rem;
  --text-6xl--line-height: 1;
}

Tailwind's default font sizes

These are the text-* sizes Tailwind CSS 4 ships with, at the browser's default 16px root. Each size sets a line height too, which you can override with aleading-* class or a modifier such as text-lg/7.

Class	Font size	Line height	v4 line-height value
`text-xs`	0.75rem (12px)	1rem (16px)	`calc(1 / 0.75)`
`text-sm`	0.875rem (14px)	1.25rem (20px)	`calc(1.25 / 0.875)`
`text-base`	1rem (16px)	1.5rem (24px)	`calc(1.5 / 1)`
`text-lg`	1.125rem (18px)	1.75rem (28px)	`calc(1.75 / 1.125)`
`text-xl`	1.25rem (20px)	1.75rem (28px)	`calc(1.75 / 1.25)`
`text-2xl`	1.5rem (24px)	2rem (32px)	`calc(2 / 1.5)`
`text-3xl`	1.875rem (30px)	2.25rem (36px)	`calc(2.25 / 1.875)`
`text-4xl`	2.25rem (36px)	2.5rem (40px)	`calc(2.5 / 2.25)`
`text-5xl`	3rem (48px)	3rem (48px)	`1`
`text-6xl`	3.75rem (60px)	3.75rem (60px)	`1`
`text-7xl`	4.5rem (72px)	4.5rem (72px)	`1`
`text-8xl`	6rem (96px)	6rem (96px)	`1`
`text-9xl`	8rem (128px)	8rem (128px)	`1`

The scale is not a single ratio: it climbs in 2px steps for body text (12, 14, 16, 18, 20) and in growing jumps for headings. That works well in general but can feel loose or tight for a specific design. A modular scale from the generator above gives every step the same proportion.

Using the export in Tailwind CSS 4

Paste the @theme block into your main CSS file. Each --text-* variable drives the matching class, and --text-*--line-height sets its default line height. Without --text-*: initial, sizes you don't define keep Tailwind's values; with it, only your sizes exist.

@import "tailwindcss";

@theme {
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-2xl: 1.9375rem;
  --text-2xl--line-height: calc(2.5 / 1.9375);
}

For Tailwind CSS 3, switch the export to v3 config and paste the fontSize object into tailwind.config.js. Moving a v3 project to v4? Theconfig to v4 converter rewrites the whole config.

Picking a ratio

Ratio	Feels	Good for
1.125–1.2	Calm, compact	Dashboards, admin panels, documentation
1.25	Balanced	Most product sites and apps
1.333–1.414	Clear hierarchy	Blogs, marketing and landing pages
1.5–1.618	Dramatic	Editorial layouts with few heading levels

Font weights, families and how the sizes fit together are covered in Tailwind CSS font size, weight and family.

Questions

What are the default font sizes in Tailwind CSS?

From text-xs to text-9xl: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72, 96 and 128 pixels at the default 16px root, defined in rem. text-base is 1rem (16px) with a 24px line height. The table on this page lists every size with its rem value and line height.

How do I change the font sizes in Tailwind CSS 4?

Add --text-* variables to an @theme block in your CSS, after @import "tailwindcss". --text-base: 1.0625rem; changes text-base, and --text-base--line-height sets its line height. To drop the defaults you do not redefine, start the block with --text-*: initial;. Tick "Replace Tailwind’s sizes" in the generator to get that line.

What is a type scale ratio?

Each size is the one below it times the ratio. With a 16px base and a major third (1.25), text-lg is 20px, text-xl 25px and text-2xl 31px. Small ratios such as 1.125 suit dense interfaces and dashboards; larger ones such as 1.333 or 1.5 give marketing pages and blogs more contrast between body text and headings.

How are the line heights calculated?

Body sizes get a line height of about 1.5, which tightens toward 1 as the size grows to 48px and beyond, the same pattern as Tailwind’s own scale. With snapping on, sizes round to whole pixels and line heights to a 4px grid, so text lines up with a 4px spacing system.

Can I still use a different line height on one element?

Yes. Add a leading utility, such as text-2xl leading-tight, or use the line-height modifier: text-lg/7 sets text-lg with a 1.75rem line height, and text-lg/[1.4] sets an arbitrary one.

Tailwind font size generator

Your font sizes

Tailwind's default font sizes

Using the export in Tailwind CSS 4

Picking a ratio

Questions