expo-tailwind-setup

Universal Tailwind CSS v4 styling for Expo apps across iOS, Android, and Web. 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. This setup uses: Add resolutions for lightningcss compatibility: Create or update metro.config.js : Create postcss.config.mjs : Create src/global.css : With Tailwind v4 and NativeWind v5, you do NOT need a babel.config.js for Tailwind. Remove any NativeWind babel presets if present: Since react-native-css requires explicit CSS element wrapping, create reusable components: Import CSS-wrapped components from your tw directory: Add custom theme variables in your global.css using @theme : Use platform media queries for platform-specific styling: Create a CSS file for Apple semantic colors: Then use in components: Use the useCSSVariable hook: Add className to component props: - Integrates Tailwind CSS v4 with react-native-css and NativeWind v5 via Metro transformer, eliminating the need for Babel configuration - Provides reusable CSS-wrapped component library (View, Text, ScrollView, Pressable, TextInput, Image, Link) that apply className styles to native elements - Supports platform-specific styling through CSS media queries, custom theme variables via @theme blocks, and Apple semantic colors with platformColor() and light-dark() functions - Includes CSS...