Overview

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacing": {
        "hsp-sm": "0.75rem",
        "vsp-md": "1.25rem"
      },
      "colors": {
        "surface": "#f4f1ec",
        "ink": "#203046"
      },
      "radii": {
        "card": "0.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-grid": true,
      "wind-demo-card": true,
      "wind-demo-title": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "block",
        "inline-flex",
        "rounded-card",
        "bg-surface",
        "px-hsp-sm",
        "py-vsp-md",
        "text-ink"
      ]
    }
  }
}

.wind-demo-grid { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-card { border: 1px solid #8797aa; }
.wind-demo-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }

What zudo-wind does

zudo-wind is the utility CSS language owned by zfb. It recognizes a closed set of complete class candidates, resolves them against the tokens and breakpoints you configure, and asks the zfb compiler to emit CSS. Its contract is versioned, so the supported language does not expand implicitly when another tool changes.

A candidate either resolves to a utility, is recognized but invalid and receives a diagnostic, or remains an ordinary class with no generated rule. A class name that is not constructed as a complete candidate cannot be guessed at build time. zudo-wind does not load utility plugins or execute project JavaScript to discover classes.

Where it fits

The build gathers candidates from the configured source plan, combines generated wind rules with authored global CSS, and processes CSS Modules on their separate path. Authored CSS remains the place for selectors and declarations outside the utility language. Wind rules are emitted without a CSS layer after authored global rules; see Cascade and reset for the full ordering.

Source discovery reads eligible file contents as text. It does not run the application. For the files scanned in build and dev, see Sources and candidates. For global CSS and CSS Modules, see the styling guide.

A first example

This configuration supplies every non-static value used below. The default reset is none, and no palette or spacing scale is added for you.

{
  "wind": {
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "panel": "var(--app-panel)"
      },
      "radii": {
        "default": "0.5rem"
      }
    }
  }
}

Place the same top-level wind value in zfb.config.ts or zfb.config.json. An authored stylesheet can define the project property that the color token references:

:root {
  --app-panel: #f4f1ec;
}

A component can then use these complete candidates:

<section class="rounded bg-panel p-4 text-panel">
  Welcome
</section>

rounded uses radii.default, bg-panel and text-panel use colors.panel, and p-4 multiplies four by the configured spacing unit. If a required token or unit is absent, the recognized utility produces a missing-token diagnostic instead of receiving an invented value. The token guide explains these bindings.

Versioned behavior

The v1 language has spec: 1; omitting that field means version 1. The compiler identifies generated rules as zudo-wind://spec/1. V1 does not generate a source map or promise line mappings for its generated CSS.

The utility syntax may look familiar if you have used Tailwind, but zudo-wind does not promise compatibility; see Coming from Tailwind.

See also

• Configuration

• Sources and candidates

• Utility reference

• Cascade and reset