Core concepts
Theme variables
Using theme variables to define your app's design tokens.
Overview
A theme is a set of CSS variables, the same ones you'd put in Tailwind's @theme, without the leading --. Tailwind's default theme is built in; yours extends or overrides it:
import { AstraWindProvider, type AstraWindTheme } from "@astrawind/css"
const theme: AstraWindTheme = {
// Always applied. Extends or overrides Tailwind's defaults.
vars: {
"color-brand": "var(--brand)",
"font-sans": "Inter",
"radius-lg": "0.75rem",
},
// Applied in light or dark mode.
light: { brand: "oklch(0.55 0.2 265)" },
dark: { brand: "oklch(0.7 0.15 265)" },
}
<AstraWindProvider theme={theme} colorScheme="system">…</AstraWindProvider>
// className="bg-brand text-white rounded-lg"
Variables create utilities by namespace, as in Tailwind: color-* gives bg-*, text-*, border-* and the other color utilities; radius-* gives rounded-*; spacing scales p-*, m-*, gap-* and sizes; breakpoint-* adds responsive variants.
Theme options
CSS variables. Colors can be any CSS color (oklch, hsl, hex, color-mix()).
(family, weight, style) => style: maps a CSS font family and weight to a native font name, since native fonts are usually registered per weight.
Root font size in px. Defaults to 16.
A theme named "brand" enables brand: variants; list your other themes' names in themeVariants so their variants don't match.
Style tokens: cn-* classes that expand to utility classes, ranked below plain utilities (like a component layer).
Default border color
If your theme defines --color-border, it becomes the default border color, as with the common * { border-color: var(--color-border) } base style. Otherwise borders default to currentColor.