Pixelwind

v1.0.5 is now live

Precision Spacing,
Simplified.

Unlock pixel-perfect control with explicit, utility-first CSS spacing (margin, padding, gap), sizing (width, height) and typography classes. No abstractions, no magic numbers, just direct values.

component.html
<div class="p-10px mb-20px w-120px h-30px gap-5px">
    <!-- Explicit control, zero abstraction -->
    Pixel-perfect spacing
</div>

Stop guessing magic numbers

Designers don't think in "scales". They think in pixels. Why force a translation layer? Pixelwind bridges the gap between design tools and code.

straighten

Precision

Direct mapping from design files to classes. If it's 17px in Figma, it's 17px in code.

bolt

Zero Config

No complex `tailwind.config.js` or theme files. Drop it in and start styling immediately.

visibility

Readable

`mb-20px` tells you exactly what it does. `mb-5` requires you to remember the multiplier.

Get up and running

Install via NPM or use our CDN for quick prototyping. No build step required if you don't want one.

npm install pixelwind
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixelwind/pixelwind.min.css">

info Framework Agnostic

Pixelwind works seamlessly with React, Vue, Svelte, or plain HTML. It's just CSS.

Utility Categories

padding

Padding & Margin

p-10px, mt-24px, px-30px

aspect_ratio

Width & Height

w-200px, h-150px, w-300px

grid_view

Gap

gap-12px, gap-30px

NAMING CONVENTION

Property + Value + Unit.
E.g. m (margin) + 10 + px = m-10px

Live Playground

Experiment with pixel-perfect classes instantly.

Open in CodePen open_in_new

See the Pen Untitled by Rohit Mahar (@Therohitmahar) on CodePen.

Why choose Pixelwind?

Feature Pixelwind Typical Utility CSS
Class Naming Explicit (p-10px) Abstract (p-2, p-3)
Configuration Zero Config config.js required
Design Handoff 1:1 Matching Translation needed
File Size ~12kb (Gzipped) Varies
Javascript None Often required for JIT
star
--
GitHub Stars
download
--
/ Month
history
--
Last Updated

Ready to simplify your CSS?

Stop fighting with spacing scales. Start building with values you know.