Tailwind CSS Setup for Expo with react-native-css

When to Use

Use this skill when you need set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling.

This guide covers setting up Tailwind CSS v4 in Expo using react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.

Overview

This setup uses:

• Tailwind CSS v4 - Modern CSS-first configuration
• react-native-css - CSS runtime for React Native
• NativeWind v5 - Metro transformer for Tailwind in React Native
• @tailwindcss/postcss - PostCSS plugin for Tailwind v4

This is a historical NativeWind 5 preview/nightly recipe. Verify the current Expo SDK/React/NativeWind compatibility and pinned dependency APIs before changing an existing app. Merge Metro/Babel/PostCSS settings without discarding unrelated plugins. Package-manager resolutions differ; do not assume Yarn resolutions affect npm. Validate native and web builds plus accessibility/reduced-motion behavior.