expo-tailwind-setup

# Tailwind CSS Setup for Expo with react-native-css 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. ## When to Use - You need to set up Tailwind CSS v4 styling in an Expo app using `react-native-css` and NativeWind v5. - The task involves configuring Metro, PostCSS, global CSS, or package versions for Expo + Tailwind. - You want one styling setup that works across iOS, Android, and web in an Expo project. ## 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 ## Installation ```bash # Install dependencies npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx ``` Add resolutions for lightningcss compatibility: ```json // package.json { "resolutions": { "lightningcss": "1.30.1" } } ``` - autoprefixer is not needed in Expo because of lightningcss - postcss is included in expo by default ## Configuration Files ### Metro Config Create or update `metro.config.js`: ```js // metro.config.js const { getDefaultConfig } = require("expo/metro-config"); const { withNativewind } = require("nativewind/metro"); /** @type {import('expo/metro-config').MetroConfig} */ const config = ...