Tailwind Linear Scale

A more intuitive and predictable scaling system for Tailwind CSS v4 & v3. This configuration replaces Tailwind's default scaling system with a linear scale that makes it easier to work with design systems.

Version Support

This repository supports both Tailwind CSS v4 and v3:

• main branch: CSS configuration for Tailwind CSS v4
• v3 branch: JavaScript configuration for Tailwind CSS v3

Both versions implement the same linear scale system, just in different formats to match their respective Tailwind versions.

Why Linear Scale?

Tailwind's default scaling system can be unintuitive:

• Class names like text-xl, text-2xl don't immediately tell you the actual size
• Spacing values like p-4 mean 16px (1rem) by default, which isn't immediately clear
• Border radius and breakpoint values follow a similar pattern

This configuration implements a linear scale where:

• Numbers directly correspond to pixel values at the base font size
• All values are calculated using the same consistent scale factor as tailwind's default system
• Class names are more predictable and easier to understand
• Makes it very easy to work with design systems (Figma)

Example:

<div class="p-4 text-16 rounded-4">
  <!-- 4px padding, 16px text, 4px border radius -->
</div>

Usage

1. Copy the CSS files from this repository
2. Import them into your Tailwind configuration
3. Use the new class names in your HTML

Note: app.css loads the @tailwindcss/forms plugin — install it (npm install @tailwindcss/forms) or remove the @plugin line.

Features

Typography Scale

Vanilla Tailwind	Linear Scale	Pixel Value (at base scale)
text-xs	text-12	12px
text-sm	text-14	14px
text-base	text-16	16px
text-lg	text-18	18px
text-xl	text-20	20px
text-2xl	text-24	24px
text-3xl	text-30	30px
text-4xl	text-36	36px
text-5xl	text-48	48px
text-6xl	text-60	60px
text-7xl	text-72	72px
text-8xl	text-96	96px
text-9xl	text-128	128px

Spacing Scale

Vanilla Tailwind	Linear Scale	Pixel Value (at base scale)
p-0	p-0	0px
p-1	p-4	4px
p-2	p-8	8px
p-3	p-12	12px
p-4	p-16	16px

Border Radius Scale

Vanilla Tailwind	Linear Scale	Pixel Value (at base scale)
rounded-none	rounded-0	0px
rounded-xs	rounded-2	2px
rounded-sm	rounded-4	4px
rounded-md	rounded-6	6px
rounded-lg	rounded-8	8px
rounded-xl	rounded-12	12px
rounded-2xl	rounded-16	16px
rounded-3xl	rounded-24	24px
rounded-full	rounded-full	9999px

Breakpoints

Vanilla Tailwind	Linear Scale	Pixel Value
sm	640	640px
md	768	768px
lg	1024	1024px
xl	1280	1280px
2xl	1536	1536px

Container sizes follow the same pattern:

Vanilla Tailwind	Linear Scale	Pixel Value
@3xs	@256	256px
@2xs	@288	288px
@xs	@320	320px
@sm	@384	384px
@md	@448	448px
@lg	@512	512px
@xl	@576	576px
@2xl	@672	672px
@3xl	@768	768px
@4xl	@896	896px
@5xl	@1024	1024px
@6xl	@1152	1152px
@7xl	@1280	1280px

How It Works

The system uses a base scale factor (--scale-unit: calc(1rem / 16)) to calculate spacing, radius, and font-size values. This means:

• At the default root font size (16px), 1 unit = 1px
• All values scale proportionally with the root font size (respecting the user's browser font-size setting)
• Change the divisor (16) to your design's base font size — or override --scale-unit on :root — to rescale the whole system
• The system remains responsive while being more predictable

Breakpoints and container sizes are defined as literal rem values instead of calc() expressions. Tailwind inlines these into @media and @container queries, where var() is not valid CSS — using literal values keeps responsive variants working and correctly ordered.