Utility CSS. Without the build.

The everyday utilities you know, with fluid sizing and a theme that’s just CSS. One stylesheet. No build pipeline to keep running.

Get started Read the documentation

@import url("https://unpkg.com/prewindcss@1.3.1");

7.1 KiB gzipped · No CSS build step · MIT licensed

Source

<div class="flex gap-md p-sm">
  <span class="p-sm bg-lighter rounded">A</span>
  <span class="p-sm bg-lighter rounded">B</span>
</div>

Result

Spacing scales fluidly. gap-md uses your theme’s fluid scale. Change the size above, or resize the browser to see it adapt.

No compilation

Prewind is a CSS file. No source scanning, purging, or JavaScript styling runtime. Use it in plain HTML, a CMS, or your existing application.

<link rel="stylesheet" href="styles.css">

A theme you can read

Your colors, sizes, and fonts live in an ordinary theme.css file. Edit a few CSS variables, and your global styles and utilities share the same values.

:root {
  --brand-1: #08754b;
  --space-md: clamp(1rem, 2vw, 1.875rem);
}

Everyday utility coverage

Flexbox, spacing, typography, colors, borders, and more. Familiar names for the things you use most, with t-shirt sizes that keep a design consistent.

<div class="flex flex-wrap gap-md">

Ship a stylesheet. Skip the CSS pipeline.

Prewind gives you useful utilities without source scanning or generated CSS. Every supported class is already in the file, ready for whatever HTML your templates, CMS or application produce.

Scroll across to compare both approaches.

How Prewind and Tailwind differ in workflow, theming, sizing and styling approach
	Prewind	Tailwind
Your workflow	Import it. It’s ready. No CSS compiler or source scan. All supported utilities ship in one file, including classes used by HTML added later.	Generate the CSS you use. Its build scans your source for class names and generates matching utilities. Configure additional sources when needed.
Your theme	One plain CSS file. Define your colors, fonts and sizes in `theme.css`. Utilities read the same `:root` variables you use in your own CSS.	A CSS-based theme system. Use `@theme` variables to configure the utilities Tailwind generates, with broader theme namespaces and options.
Your sizing	Fluid, out of the box. `p-md` and `gap-lg` use a small set of t-shirt sizes. The default spacing and type scales grow smoothly with the viewport.	A wider set of choices. Use its spacing scale, arbitrary values and responsive variants. Add your own fluid values when your design calls for them.
Your CSS	Global first. Utilities where useful. Keep shared styling in your stylesheet and use utilities for local adjustments. Write grid, motion and special cases in ordinary CSS.	More styling through utilities. A much wider vocabulary covers grid, motion, transforms and state variants, so more styling can live in your markup.

Choose Tailwind when you want its wider utility coverage, arbitrary values and extensive state variants. Choose Prewind when a ready-to-use utility layer, fluid defaults and ordinary CSS give you everything you need.

Explore the tradeoffs

Compared with current Tailwind: source detection and theme variables. Its Play CDN is for development, rather than production use.

Your theme is just CSS.

One small file for the choices that make a site yours.

Set your most-used colors, spacing, type sizes, and fonts in theme.css. A utility like bg-brand-1 reads the same variable you use in your own styles. Change it once and both stay in sync.

Start with the default theme.css, then make it your own. There’s no configuration language to learn.

Explore theming

/* theme.css */
:root {
  --brand-1: #08754b;
  --brand-1-light: #edf6f0;
}

A little more you.

Your content. Your colors. The same useful utilities.

Make it yours

This preview uses bg-brand-1 and bg-brand-1-light.

Built on the CSS you already have.

Small in scope. Clear about how it works.

Prewind uses native cascade layers and CSS custom properties. Your global styles establish the baseline. Utilities override them where you need a local change. There’s no generated stylesheet to keep in sync with your templates.

Typography, spacing, and colors share one set of tokens. Need a layout Prewind doesn’t cover? Write ordinary CSS alongside it.

@layer reset, styles, prewind;

@import url("theme.css");
@import url("prewind.css");

@layer styles {
  /* Shared styles belong here. */
  nav a {
    color: var(--brand-1);
  }
}

A deliberate cascade: reset, your styles, then utility overrides. Read the global first approach.

Add CSS. Start building.

Use a CDN or download the files and host them yourself. Neither needs a CSS build step.

Start with your theme
Download theme.css and edit its colors, sizes, and fonts.
Create styles.css
Copy this setup next to your theme file. Add shared styles in the styles layer.
Link it in your HTML
<link rel="stylesheet" href="styles.css">

Read the complete getting started guide

styles.css

@layer reset, styles, prewind;

@import url("theme.css");
@import url("https://unpkg.com/prewindcss@1.3.1");

@layer styles {
  body {
    font-family: var(--font-body);
    color: var(--black);
    background: var(--white);
  }
}

Prefer local files? Download prewind.css and change the second import to url("prewind.css").

A few useful details.

Is Prewind a drop-in replacement for Tailwind?

Not quite. Many everyday utility names are familiar, but Prewind uses t-shirt sizes, semantic colors, and a smaller set of utilities and variants. Existing Tailwind markup needs adapting. Compare the approaches.

Do I need Node or a JavaScript runtime?

No. The library runs as CSS in your browser. The optional CLI can generate theme values, but you can edit theme.css directly. This website’s demo controls use a little JavaScript; Prewind itself does not.

What does “7.1 KiB gzipped” include?

The complete Prewind 1.3.1 utility stylesheet and its reset, compressed with gzip. Your theme, fonts, and site styles are separate. It’s a fixed library size, rather than a comparison with a tailored Tailwind output.

Which browsers should I use?

Prewind targets modern browsers. It uses cascade layers, clamp(), and relative CSS color syntax. Check the browsers your project supports, particularly for background color utilities. Read the browser notes.