Core concepts
Colors
Using and customizing the color palette in React Native apps.
Default color palette
Tailwind's palette is built in, in the same oklch() values, converted to colors React Native can draw. These swatches are rendered by AstraWind from classes like bg-sky-500:
50
100
200
300
400
500
600
700
800
900
950
Working with colors
Every color utility takes the palette: bg-*, text-*, border-*, ring-*, shadow-*, fill-*, stroke-*, decoration-*, placeholder:text-*, gradients and more.
Adjust opacity with a modifier: bg-black/75, text-sky-500/[0.3] or bg-pink-500/(--my-alpha).
<View className="rounded-xl bg-sky-500/10 p-4 ring-1 ring-sky-500/20">
<Text className="text-sky-700 dark:text-sky-300">Opacity modifiers work on every color utility.</Text>
</View>
Customizing your colors
Add colors with color-* theme variables, in any CSS color format, including color-mix():
const theme = {
vars: {
"color-midnight": "#121063",
"color-tahiti": "oklch(0.72 0.11 221.19)",
"color-tahiti-muted": "color-mix(in oklab, var(--color-tahiti) 50%, transparent)",
},
}