Tailwind CSS Setup for Expo with react-native-css

Universal Tailwind CSS v4 styling for Expo apps across iOS, Android, and Web.

- 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 variable hooks for accessing theme values in JavaScript and configuration examples for Metro, PostCSS, and global CSS 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.

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

# Install dependencies
npx expo install tailwindcss@^4 [email protected] [email protected] @tailwindcss/postcss tailwind-merge clsx