Pixelwind – Pixel-perfect CSS utilities

Drop-in, utility-first CSS classes for fast styling without configuration.

🚀 Quick Start

Get started with Pixelwind by adding the following line to your project’s head:

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

Or install via npm:

npm install pixelwind

Features

Pixelwind provides a comprehensive set of CSS utilities designed for pixel-perfect precision and ease of use.

Utility-first

Style elements with classes like p-8px and m-16px. Covers a 1px to 30px scale for ultimate precision.

Lightweight

With a focused set of utilities, the CSS footprint is minimal, ensuring fast load times.

Responsive Ready

Includes responsive modifiers like -1600 for seamless adaptation across screen sizes.

CDN Friendly

Easily integrate Pixelwind into any project via CDN for a hassle-free setup.

Examples

See how Pixelwind utilities make it easy to build consistent, responsive components. Each example shows the code and the live preview.

Card Example

A simple card built with Pixelwind spacing utilities (p-16px, mt-12px, w-250px, etc.).


<!-- Pixelwind Card -->
<div class="p-16px bg-white rounded-lg border w-250px">
  <div class="h-140px bg-cover bg-center rounded-md"
       style="background-image: url(...)"></div>

  <div class="pt-12px">
    <h3 class="text-lg font-bold">Pixelwind Card</h3>
    <p class="mt-4px text-sm text-gray-600">
      This card's spacing is set with Pixelwind.
    </p>
    <button class="mt-12px p-8px w-full bg-[#0d80f2] text-white rounded-md text-sm font-bold">
      Learn More
    </button>
  </div>
</div>

Pixelwind Card

This card's spacing is set with Pixelwind.