NativeWind 5

RC · Tailwind 4. Tailwind 4 classes compiled by react-native-css, as the kit in src/components/ui/ (src/ui/nativewind5/ before setup). NativeWind 5 is still a release candidate, so it is not the default (that is nativewind4, the stable release); pick it if you want Tailwind 4 today and accept an RC. Pure JS, so Expo Go works.

nativewind@5.0.0-rc.0 and react-native-css@3.1.0-rc.0 are pinned as a pair - NativeWind's peer dependency names the engine version exactly. The module also adds a lightningcss override to package.json (both pin 1.30.1; without it npm hoists a newer one and Metro fails to parse src/global.css).

SetupCopy Anchor Link

bun run setup --ui nativewind5

1. Set your brand in readynative.config.ts (or the full palette in src/theme/tokens.ts).
2. bun run gen:theme - rewrites src/global.css (@theme / :root colours, dark mode via prefers-color-scheme).
3. bun run start -- -c - once, so Metro picks up the NativeWind transform.

Setup writes babel.config.js, metro.config.js, postcss.config.mjs and nativewind-env.d.ts, registers ThemeProvider (order 50) and pins lightningcss@1.30.1 as a package override for Tailwind 4's native binary.

UsageCopy Anchor Link

Screens use the primitives:

import { Box, Button, Screen, Text } from "@/components/ui";

<Screen scroll>
  <Box p={4} gap={2}>
    <Text variant="title">Profile</Text>
    <Button onPress={save}>Save</Button>
  </Box>
</Screen>;

Your own components use classes; the token names are the colours:

export function Badge({ children }: BadgeProps) {
  return <View className="rounded-full bg-primary px-3 py-1">{children}</View>;
}

Anything dynamic reads useTheme() - p-${n} can't be generated at runtime.

To add a primitive to the kit: create it in src/components/ui/, add its prop type to src/components/ui/types.ts, and export it from src/components/ui/index.ts.

GotchasCopy Anchor Link

• Changed metro.config.js or babel.config.js? bun run start -- -c, or you'll chase a stale cache.
• ThemeProvider applies the mode through VariableContextProvider; the rc prefers it over the deprecated vars().
• Before setup, or with --keep-modules, bun run setup --ui <other> swaps the adapter, config and deps. Screens don't change.

Remove itCopy Anchor Link

Every app needs a ui option, so there is no none to fall back to - you switch instead. While modules/ exists (a tree set up with --keep-modules), one call does it:

bun run setup --ui nativewind4 --yes --keep-modules

A finalized tree can't switch: clone a fresh copy of your tier repo, run setup there with the new option and port your code across - see Can I change a module after setup?.

ReferenceCopy Anchor Link

Everything below is generated from modules/ui/nativewind5/module.json - the same file bun run setup reads, so it is what actually lands in your repo.

InstallCopy Anchor Link

bun run setup --ui nativewind5

Module id: ui/nativewind5.

DependenciesCopy Anchor Link

ProvidersCopy Anchor Link

Rendered in src/providers.tsx (lower order = outermost):

After setupCopy Anchor Link

1. Run bun run start -- -c once so Metro picks up the NativeWind transform.

FilesCopy Anchor Link