NativeWind needs four small changes: Tailwind config, a CSS entry file, a Babel preset and a Metro wrapper. The files below match NativeWind v4; always compare with the current install page because versions track Tailwind.
Core concepts
- Install packages: Use
npx expo install nativewind react-native-reanimated react-native-safe-area-contextplustailwindcssas a dev dependency. Reanimated powers some class-driven animations. — NativeWind docs - tailwind.config.js: Point
contentatapp/andcomponents/, and add the NativeWind preset so React Native utilities exist. — NativeWind docs - global.css, Babel and Metro: Create a CSS file with the Tailwind directives, enable the NativeWind Babel preset, wrap the Metro config, and import the CSS file once in your root layout. — Expo Tailwind guide
- Verify it works: Add a class such as
bg-red-500to a view, reload with cache cleared (npx expo start -c), and confirm the colour appears. — Expo docs
Concept videos
YouTube channels and searches for these topics. On a large screen they open in the reading panel next to the roadmap.
- NativeWind v4 setup — YouTube search: NativeWind v4 Expo setup
Explanation
Clear the cache after config changes
Metro caches transformed files. After editing Tailwind, Babel or Metro config, restart with npx expo start -c before assuming something is broken.
Content paths matter
If a folder is missing from content, classes used only there are not generated and styles silently disappear.
What Is It?
The NativeWind setup connects Tailwind's class generation to React Native's style system through Babel and Metro.
Why Should I Care?
Most NativeWind problems are config problems, so a verified setup saves hours of misdiagnosed styling bugs.
Real World Analogy
It is wiring a new appliance: four connections, and nothing lights up until all four are plugged in.
Visual Mental Model
global.css -> Tailwind (config + content paths) -> Babel preset -> Metro wrapper -> styled componentsSmallest Possible Example
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
presets: [require('nativewind/preset')],
theme: { extend: {} },
plugins: [],
};Common Mistakes
❌ Forgetting to import global.css in the root layout.
No CSS is loaded, so no class has any effect.
❌ Not restarting Metro with a cleared cache.
Old transformed bundles hide the new config.
Build This Mini Project
Set up NativeWind in a fresh Expo project and render a coloured card to prove classes work on a physical device.
Prompts for Cursor, Claude Code & Codex
Paste these into Cursor, Claude Code, Codex, or any coding agent. Replace the bracketed parts with your app details, and keep the agent in plan mode first so you review the approach before it edits files.
Set up NativeWind
Set up NativeWind in this Expo project following the current official install guide for my SDK. Show each changed file (tailwind.config.js, global.css, babel.config.js, metro.config.js, root layout import). Then add a test view with bg-red-500 and explain how I verify it with npx expo start -c.Rules, databases & blogs to use
- Tailwind rules by technology: rules to keep class usage tidy
