Styling Nativewind V4 Expo

This handles the full NativeWind v4 setup for Expo projects, from initial config through dark mode and third-party component styling. It walks you through the critical three-path setup (CSS file location, Metro input, app import) and includes a deterministic audit prompt you can drop into Claude to diagnose existing repos. The troubleshooting workflow is solid: always clear Metro cache first, verify Tailwind CLI compiles, then check path consistency before chasing platform quirks. Useful if you've hit the "className not applying" wall or need to configure cssInterop for library components. The checklist format makes it easy to validate you haven't missed a step in babel.config.js or metro.config.js.

skills.sh installs: 420
GitHub stars: 4
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo --agent claude-code

Installs into .claude/skills of the current project.

Files

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@^4 with tailwindcss@^3.4.17; native peers resolved through the app's Expo SDK.
nativewind/preset and content globs covering every source of complete utility strings.
One CSS entry using the Tailwind v3 directives, connected to both Metro's withNativeWind input and the real application entry.
nativewind/babel in Babel presets, with jsxImportSource: "nativewind" on babel-preset-expo.
nativewind-env.d.ts referencing nativewind/types, without shadowing the package/module name.