tailwindcss-calc
v0.0.4 · 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 →

Live demo — resize the window

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

All boxes use w-* and h-* — they scale proportionally with the viewport.

How it works

One formula. Every utility.

Every class applies the same formula under the hood, making every property scale 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.

1440px

Max viewport cap. Values stop growing above this width.

1440

Your design reference width. Override with --window-width.

w-100 at different viewports

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-* grid-gap-*

Borders & Radius

rounded-* 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.