Documentation

What is Pixelwind?

Pixelwind is a lightweight, utility-first CSS package built for developers who want exact control over spacing and sizing. Instead of abstract scales or configuration files, it offers clear, pixel-based utility classes for padding, margin, gap, width, and height.

The class name directly represents the value applied, making layouts predictable, readable, and easy to maintain—especially when working with pixel-perfect designs.

NPM

Install Pixelwind via npm:

Then import it in your project:

CDN

Include Pixelwind directly in your HTML:

Using Pixelwind is intentionally simple. After installing it via npm or including the stylesheet directly, you can start applying utilities in your markup immediately.

For example, adding p-10px applies 10 pixels of padding, mb-20px adds a 20-pixel bottom margin, and w-120px sets an element's width to exactly 120 pixels.

There is no build step, no configuration, and no mental mapping between class names and values—what you write is what you get.

Example

space_bar Margin

Control element margins with pixel precision.

padding Padding

Add internal spacing to elements.

grid_view Gap

Control spacing between flex and grid items.

aspect_ratio Width & Height

Set exact dimensions for elements.

text_fields Font Size

Set precise font sizes.

devices Responsive (1600px+)

Margin, padding, gap, width, and height utilities are available with the -1600 suffix for screens 1600px and wider. The values are automatically scaled up.

Pixelwind fits naturally into any frontend setup, whether you're writing plain HTML or working inside a modern JavaScript framework. It can be used on its own or alongside other styling approaches without conflict. By focusing only on spacing and sizing, Pixelwind stays small, fast, and opinionated in the right way: it helps you translate designs directly into code with confidence and precision, while keeping your markup clean and expressive.