expo-tailwind-setuplisted

# 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. ## 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 = getDefaultConfig(__dirname); module.exports = withNativewind(config, { // inline variables break PlatformColor in CSS variables inlineVariables: false, // We add className support manually globalClassNamePolyfill: false, }); ``` ### PostCSS Config Create `postcss.config.mjs`: ```js // postcss.confi