~ tailwindcss-calc
v0.0.5 · Tailwind CSS v4

Pixel-perfect scaling.
Zero breakpoints.

A Tailwind CSS v4 plugin built entirely in CSS. Every utility scales proportionally to the viewport using calc() and clamp().

$ npm install tailwindcss-calc
See how it works →
viewport —
w-100 renders as —

Resize the window (or open it on your phone) — it updates live.

Live demo — every box scales with the viewport

w-40
w-80
w-120
w-160
w-200

Same w-* / h-* classes — proportional at any width, capped at the reference.

How it works

One formula. Every utility.

Every class shares a single --calc-ratio factor, so every property scales fluidly with the viewport.

Generated CSS

property: calc(value * clamp(0px, 100vw, max-width) / base-width);

value

The number in your class.
100 in w-100.

max-width

Viewport cap. Values stop growing past the reference width.

base-width

Design reference: 375 on mobile, 1440 from md.

📱 Built-in mobile support

The base reference switches automatically at the md breakpoint, so you design mobile-first and pair it with normal responsive variants:

<h1 class="text-44 md:text-88"> Scales on phone and desktop </h1>

text-44 uses the 375 reference on phones; md:text-88 takes over with the 1440 reference on larger screens — this very page is built that way.

w-100 across viewport widths

(illustrated with a fixed --window-width: 1440)

375px
~26px
768px
~53px
1024px
~71px
1440px
100px ✓
1920px
100px ✓

Values are capped at the base width — no overflow on ultra-wide screens.

Features

Why tailwindcss-calc?

✦

100% CSS

No JavaScript. No runtime. Built entirely with native CSS features — @utility, calc() and clamp(). Pure, zero-overhead performance.

⟷

Fluid scaling

Design at a fixed reference width and every screen gets a perfectly proportional result. No breakpoints. No media queries. Just math.

⚙

Fully customizable

Override the reference width with a single CSS variable. Set --window-width: 1920 and every utility instantly recalculates to match your design system.

−

Negative values

All compatible utilities support negative variants. Use -mt-20, -top-40, -translate-x-50 — all properly scaled.

Available utilities

Everything you need.

Sizing

w-* h-* size-* min-w-* max-w-* min-h-* max-h-*

Padding

p-* px-* py-* pt-* pb-* pl-* pr-*

Margin + negative

m-* mx-* my-* mt-* mb-* ml-* mr-* -m-* -mt-* -mb-* -mx-*

Typography + negative

text-* leading-* tracking-* word-spacing-* -tracking-* -word-spacing-*

Positioning + negative

top-* bottom-* left-* right-* inset-* inset-x-* inset-y-* -top-* -left-* -inset-*

Transform + negative

translate-x-* translate-y-* -translate-x-* -translate-y-*

Gap

gap-* gap-x-* gap-y-* row-gap-* col-gap-*

Borders & Radius

rounded-* rounded-t-* rounded-b-* rounded-l-* rounded-r-* border-w-* border-t-* border-b-* border-l-* border-r-*

Misc + negative

container outline-offset-* -outline-offset-*

Get started

Up and running in 2 steps.

1

Install the package

$ npm install tailwindcss-calc
2

Import in your CSS file

@import "tailwindcss";
@import "tailwindcss-calc";

That's it. 🎉

All utilities are now available. Use w-100, p-24, text-48 and any other numeric class — they all scale with the viewport.