Pixel-based utility-first CSS: spacing, gap, width/height (1–30px) with optional responsive variants.
npm install pixelwindPixelwind is a lightweight, utility-first CSS package that gives you exact pixel-based spacing and sizing utilities — without configuration, build steps, or scale guessing.
If your design says 13px, you write 13px.
---
* 🎯 Exact pixel control — no spacing scales, no approximation
* 🧠 Self-documenting utilities — readable at a glance
* ⚡ Zero config & zero build — works instantly
* 🧩 Plays well with Tailwind — use both together
* 📦 Tiny & focused — does one thing, does it well
---
``bash`
npm install pixelwind
---
`js`
import "pixelwind/pixelwind.css";
`html`
---
Pixelwind currently provides pixel-based utilities from 1px to 30px for:
* Padding → p, pt, pr, pb, pl
* Margin → , mt, mr, mb, ml
* Gap →
* Width →
* Height →
---
`htmlBox
Each class maps directly to CSS:
css
p-10px → padding: 10px;
w-120px → width: 120px;
gap-5px → gap: 5px;
``---
Pixelwind is not a Tailwind replacement — it complements it.
Use Tailwind for:
* Layout
* Typography
* Colors
* Responsive design
Use Pixelwind when you need:
* Exact spacing from design specs
* One-off pixel values
* Clean alternatives to inline styles
They work together without conflict.
---
* Design-heavy UIs
* Docs & component libraries
* Prototypes & demos
* Pixel-perfect layouts
* Teams working closely with designers
---
Pixelwind is pure CSS and works in all modern browsers.
---
MIT © 2025 Rohit Mahar