Core concepts
Styling with utility classes
Building complex components from a constrained set of primitive utilities, on native.
Overview
You style components by combining many single-purpose classes directly in className. This card is rendered by AstraWind, on this page, from the code below it:
ChitChat
You have a new message!
<View className="w-full max-w-sm flex-row items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/10">
<View className="size-12 shrink-0 items-center justify-center rounded-full bg-sky-500">
<Text className="text-lg font-bold text-white">A</Text>
</View>
<View>
<Text className="text-xl font-medium text-black dark:text-white">ChitChat</Text>
<Text className="text-gray-500 dark:text-gray-400">You have a new message!</Text>
</View>
</View>
Every class here is Tailwind's, with Tailwind's values: p-6 is 24 points of padding, rounded-xl a 12-point radius, shadow-lg the same box shadow as on the web, and ring-1 a one-point ring drawn as a box shadow.
Why utility classes on native
You don't name styles or keep a StyleSheet next to every component.
Changes stay local: removing a class can't break another screen.
The same classes work in your web app, in shadcn-style components, and in your editor's Tailwind tooling.
Where React Native differs
Layout is flexbox, and a
View is a column by default, as in React Native.
flex and
inline-flex set a row, as they do on the web. Text must be inside
Text, but text styles set on a
View cascade to the text inside it, as in CSS. See
Preflight.
Using arbitrary values
When you need a value outside the theme, use square brackets:
className="top-[117px] bg-[#bada55] grid-cols-[repeat(3,1fr)]". Custom properties work with parentheses, like
bg-(--brand). See
Adding custom styles.