expo-tailwind-setup

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: - 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 - autoprefixer is not needed in Expo because of lightningcss - postcss is included in expo by default - No babel.config.js - Configuration is now CSS-first - PostCSS plugin - Uses @tailwindcss/postcss instead of tailwindcss - CSS imports - Use @import "tailwindcss/..." instead of @tailwind directives - Theme config - Use @theme in CSS instead of...