v0.2.0

System

Core concepts

Resolving classes at runtime

How AstraWind turns className into native styles without a build step.

No build step

Tailwind on the web scans your source files for class names and generates a stylesheet. AstraWind doesn't need to: it parses classes when a component renders and resolves them to native styles, so there's nothing to detect, and class names can be built at runtime (`bg-${color}-500`) without a safelist.

How a className is resolved

The class is parsed into its variants, utility, value, modifier and important flag.

Variants are checked against the element: its state, its parent's, the window, the color scheme and platform.

The utility is evaluated with Tailwind's semantics: theme variables, var() and calc(), oklch() colors, and later shorthands overriding earlier longhands.

Classes are ordered as Tailwind would order them, so the result doesn't depend on the order you write them.

Results are cached by className and everything they depend on, so re-rendering with the same classes costs a map lookup.

Without React

@astrawind/css/core resolves classNames to style objects with no React or React Native dependency, e.g. for tests or tooling. The quick reference tables in these docs use it:

tsx

import { compileTheme, resolve } from "@astrawind/css/core"

const t = compileTheme({}, "light")
resolve("p-4 bg-red-500 rounded-lg", {
  getVar: t.getVar,
  breakpoints: t.breakpoints,
  rem: 16,
  em: 16,
  windowWidth: 390,
  windowHeight: 844,
  colorScheme: "light",
  platform: "ios",
  rtl: false,
  self: { attrs: {} },
  groups: {},
  ancestors: [],
}).style
// { padding: 16, backgroundColor: "rgba(251, 44, 54, 1)", borderRadius: 8 }

← Adding custom styles

Hooks and components →