styling-nativewind-v4-expo
NativeWind v4 in Expo
This is deliberately a v4 skill. On the review date, the official site labels v5 a prerelease; v5/Tailwind v4 configuration is a separate stack, not a drop-in refresh of these files. Inspect the lockfile before editing and keep this skill's dependency majors explicit.
Establish the configuration
Read package.json and the lockfile, the actual app entry, Expo config, Babel config, Metro config, Tailwind config, and the CSS entry. Identify Expo Router versus a classic entry and account for src/app, monorepos, or a custom project root.
Use references/expo-setup.md for the coordinated v4 setup. The invariant is:
nativewind@^4withtailwindcss@^3.4.17; native peers resolved through the app's Expo SDK.nativewind/presetand content globs covering every source of complete utility strings.- One CSS entry using the Tailwind v3 directives, connected to both Metro's
withNativeWindinput and the real application entry. nativewind/babelin Babel presets, withjsxImportSource: "nativewind"onbabel-preset-expo.nativewind-env.d.tsreferencingnativewind/types, without shadowing the package/module name.
Preserve unrelated Metro wrappers, Babel plugins, config plugins, and project module format. Do not replace a working app's configuration wholesale or install a second incompatible Reanimated/Worklets stack.