Core concepts
Adding custom styles
Arbitrary values, style tokens, and adding className to any component.
Using arbitrary values
Use square brackets for one-off values, and parentheses for CSS variables. Arbitrary values support calc(), var() and any CSS color:
<View className="top-[117px] w-[calc(100%-2rem)] bg-[#bada55] lg:top-[344px]" />
<View className="bg-(--brand) p-(--card-padding)" />
<Text className="text-[22px] leading-[1.3] tracking-[-0.01em]" />
Adding className to any component
styled() adds className to third-party and your own components:
import { styled } from "@astrawind/css"
import { BlurView } from "expo-blur"
import { Circle } from "lucide-react-native"
const Blur = styled(BlurView)
const Icon = styled(Circle, { kind: "icon" }) // size-* and text-* become size and color props
<Blur className="absolute inset-0 rounded-2xl" />
<Icon className="size-5 text-indigo-500" />
"view" (default: text styles pass to descendant text), "text", "input" (placeholder and selection colors become props), or "icon".
Tracks press, hover and focus for active:, hover: and focus: (set for Pressable and TextInput).
Extra className props mapped to style props, e.g. { contentContainerClassName: "contentContainerStyle" }.
Moves resolved styles to props for third-party components.
Style tokens
A theme's styles define cn-* classes that expand to utilities. They rank below plain utilities, like Tailwind's components layer, so a component's own classes win:
const theme = {
styles: {
"cn-card": "rounded-xl border bg-white p-6 shadow-sm dark:bg-zinc-900",
},
}
<View className="cn-card p-8" /> // p-8 wins over the token's p-6
Styles for props
For props that take a style or a color, resolve a className with useTw(). See Hooks and components.