Documentation

A lightweight CSS utility library with no build step. Prewind provides the most useful utilities for everyday styling while encouraging a simpler, more maintainable approach to CSS. The complete Prewind 1.3.1 stylesheet is about 7.1 KiB gzipped, excluding your theme and fonts. No build step, no purging, no tree-shaking — just one CSS file.

If you know Tailwind, you already know Prewind. The utilities you reach for every day — flex, padding, margin, text color, background, borders, rounded corners, shadows — they're all here with the same class names. Prewind uses t-shirt sizes (p-md, gap-lg) instead of arbitrary numbers. Its semantic colors, supported utilities and available variants also differ. Familiar names make it approachable; existing Tailwind markup still needs adapting.

Created by Codepilot. Inspired by Tailwind CSS and Utopia.

Philosophy: Global First

Prewind follows a "Global First" approach to styling. Instead of reaching for utility classes by default, start with global CSS and get more specific only when needed:

1. Global CSS for global styles. Navigation links, typography defaults, form elements — things that should look the same everywhere belong in your global stylesheets.
2. Utility classes for one-offs. When you need to tweak spacing, change a color, or adjust layout for a specific element, use a utility class. This is where Prewind shines.
3. Inline styles for arbitrary values. If you need a margin of exactly 37px for one specific case, use a style attribute. Don't fight the platform.

This approach keeps your HTML readable. You won't end up with 30 classes on a single element.

Prewind works with the platform, not around it. CSS already has a cascade, variables, and specificity rules that work well — we don't need to reinvent them.

Getting Started

Create a styles.css file that sets up CSS layers, imports your theme and Prewind, and contains your global styles:

@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);
  }

  /* Your global styles go here */
}

Then link to it in your HTML:

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

That's it. The layer order ensures Prewind utility classes override your global styles when you need them to.

The theme file

The theme.css import contains CSS variables for colors, spacing, fonts, and other design tokens. Run npx prewindcss theme to copy the default theme to your clipboard, then save it as theme.css and customize as needed. See the Theming section for details on all available variables.

The included reset

Prewind includes a minimal CSS reset in the reset layer. It sets box-sizing: border-box on all elements, removes default margins and padding, makes images block-level and responsive, inherits fonts on form elements, and removes default button and link styling. You can see the full reset at the top of prewind.css.

Theming

All of prewind's design decisions flow through CSS variables. To customize your site's look, edit these variables. These variables aren't just for utility classes — you can reference them in your own CSS too. This keeps your global styles and utility classes consistent.

Colors

Prewind uses simple, memorable color names:

Brand colors for your primary palette:

• --brand-1, --brand-1-light
• --brand-2, --brand-2-light
• --brand-3, --brand-3-light
• --brand-4, --brand-4-light

Neutral colors for things like text and backgrounds:

• --black, --darker, --dark, --midtone, --light, --lighter, --white

Semantic colors for UI feedback:

• --success, --success-light
• --info, --info-light
• --warning, --warning-light
• --error, --error-light
• --link
• --highlight

Fluid Sizing

Prewind uses t-shirt sizes for spacing and typography: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl.

These aren't arbitrary — they're generated using the same math as Utopia. Each size scales fluidly with the viewport using CSS clamp(), and the proportional relationship between sizes stays constant. So when the viewport grows, md and lg both get bigger, but lg is always the same ratio larger than md.

This gives you responsive typography and spacing without writing media queries, and it enforces a consistent design system. You pick from a constrained set of sizes, which leads to more harmonious layouts than choosing arbitrary pixel values.

To generate custom fluid sizes for your project:

npx prewindcss text   # Generate fluid typography scale
npx prewindcss space  # Generate fluid spacing scale

Each command launches an interactive configurator where you can adjust:

• Viewport range (min/max)
• Base size at each viewport
• Scale ratio (using musical intervals like Major Third, Perfect Fifth, etc.)

The generated CSS is copied to your clipboard — just paste it into your theme variables.

Note: The t-shirt sizes used for borders (--border-sm, --border-lg), border radius (--rounded-sm, --rounded-lg), and shadows (shadow-sm, shadow-lg, are not fluid — they're fixed values you set manually in your theme variables.

Prewind vs Tailwind

Prewind keeps the utility-class workflow and removes the CSS compilation pipeline. Instead of generating a stylesheet from your templates, it ships the complete supported utility set as plain CSS. That makes it useful for CMS themes, server-rendered pages, prototypes and applications where a small, stable utility layer is enough.

Why choose Prewind:

• No CSS build process to maintain. Import the stylesheet or host it yourself. There is no source scan, purge configuration or browser JavaScript compiler.
• All supported utilities are already available. HTML added by a CMS or rendered at runtime can use them without regenerating CSS. This applies to the utilities Prewind actually includes, not arbitrary class names.
• A theme you can edit directly. Colors, spacing, fonts and sizes live in ordinary CSS custom properties in theme.css. Utilities and global styles read the same values; changing a brand color does not require generating a new utility.
• Fluid defaults instead of repeated sizing adjustments. T-shirt utilities such as p-md and gap-lg use a constrained scale, with default spacing and typography that grow smoothly through CSS clamp().
• Global CSS stays useful. Define shared styling once, then use utilities for one-offs. Grid, animations and unusual values can stay in ordinary CSS or inline styles.

Where Tailwind is the better fit:

Tailwind offers much wider utility coverage, arbitrary values and extensive state variants. Its build generates utilities from detected class names, which can keep output focused on the classes your project uses. Choose it when that coverage and workflow suit your team.

Current Tailwind also uses CSS theme variables. The distinction is that Prewind's :root variables are consumed directly by an existing stylesheet, while Tailwind's 1 system configures generated utilities. Tailwind also has a Play CDN for trying it without a build; its documentation reserves that option for development. See source detection for how generated class coverage works.

Prewind is not a drop-in replacement. Familiar names make it approachable, but sizes, colors, utility coverage and available variants differ. Its roughly 7.1 KiB gzipped stylesheet is a fixed library size, not a performance comparison with a tailored Tailwind output.

What Prewind leaves out

Prewind intentionally excludes some things to stay lightweight and encourage better practices:

No grid utilities. Flexbox covers most layout needs. For complex grids, write CSS.

No animations, transitions, or transforms. These are powerful features that benefit from being defined in one place (your global CSS) rather than scattered across utility classes.

No predefined color palette. Tailwind ships with hundreds of color utilities like bg-sky-500. Prewind uses semantic color names like bg-brand-1 that you define yourself. You pick your own colors.

No arbitrary values. Instead of m-[37px], use style="margin: 37px". This keeps the utility class system constrained to your design tokens.

No ring utilities. Prewind provides outline utilities. Style focus indicators in your global CSS to suit the browsers your project supports.

Limited variants. Hover variants exist for colors, opacity, background opacity, and cursor. Responsive variants exist for display, flexbox, and text alignment. That covers most real-world needs without exploding the file size.

The goal is useful utilities for most of what you need, most of the time — not coverage of every edge case.

Prewind-Only Classes

These utility classes are unique to Prewind or behave differently than their Tailwind counterparts:

• container — Uses CSS clamp() for fluid responsive width, unlike Tailwind's breakpoint-based container.
• max-w-text — Constrains width for optimal reading measure.
• max-w-form — Constrains width for form layouts.
• debug — Adds a dashed lime outline and subtle green background to visualize layout boundaries during development.
• revert — Resets all CSS properties to browser defaults using all: revert.
• bg-opacity- — Controls background opacity with values ranging from 0 to 100 in increments of 10.
• font-body, font-heading — Prewind uses semantic font family names instead of Tailwind's font-sans, font-serif, font-mono.

Reference

General

Accessibility

Aspect Ratio

Backdrop Blur

Backgrounds

Background color classes use the --bg-opacity variable, allowing you to control opacity separately:

<div class="bg-brand-1 bg-opacity-50">50% opacity background</div>

Available colors: brand-1, brand-1-light, brand-2, brand-2-light, brand-3, brand-3-light, brand-4, brand-4-light, black, darker, dark, midtone, light, lighter, white, success, success-light, info, info-light, warning, warning-light, error, error-light, link, highlight

Opacity values: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

Repeat:

Size:

Position:

Attachment:

Clip:

Borders

Width:

Radius:

Style:

Color:

Same colors as backgrounds.

Cursor

Display

Flexbox

Container:

Item:

Gap

Sizes: 0, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl

Lists

Margin

Sizes: 0, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full

Object Fit

Opacity

Values: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

The same values are available as hover variants, e.g. hover:opacity-50.

Outlines

Prewind uses outlines instead of "ring" utilities. Modern CSS supports rounded outlines, so there's no need for the box-shadow workaround.

Width:

Style:

Color:

Same colors as backgrounds and borders.

Overflow

Padding

Sizes: 0, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full

Pointer Events

Position

Resize

Shadows

Sizing

Width:

Height:

Min/Max:

Text

Color:

Same colors as backgrounds.

Size:

Alignment:

Style:

Decoration:

Weight:

Family:

Line Height:

Letter Spacing:

Transform:

User Select

Vertical Align

Visibility

Whitespace

Word Break

Z-Index

Variants

Hover

Hover variants are available for colors, opacity, background opacity, and cursor:

Responsive

Responsive variants are available for display, flexbox, and text alignment at four breakpoints:

Available responsive utilities:

• Display: hidden, block, inline-block, inline, flex, inline-flex
• Flex direction: flex-row, flex-col, flex-row-reverse, flex-col-reverse
• Flex wrap: flex-wrap, flex-nowrap
• Justify: justify-start, justify-center, justify-end, justify-between, justify-around
• Align: items-start, items-center, items-end, items-stretch
• Text alignment: text-left, text-center, text-right, text-justify

Example:

<div class="flex flex-col md:flex-row gap-md">
  <div class="hidden lg:block">Visible on large screens</div>
</div>

Browser support

Prewind targets modern browsers. The stylesheet uses cascade layers, fluid clamp() values and relative CSS color syntax such as rgb(from var(--brand-1) r g b / var(--bg-opacity, 1)). Test your project’s supported browsers, particularly background color utilities. Prewind does not include a browser JavaScript compiler or polyfill.