expo-tailwind-setup
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
@themeblocks, and Apple semantic colors withplatformColor()andlight-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 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx
More from expo/skills
building-native-ui
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
38.7Knative-data-fetching
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).
30.6Kupgrading-expo
Guidelines for upgrading Expo SDK versions and fixing dependency issues
26.6Kexpo-cicd-workflows
Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.
25.4Kexpo-deployment
Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes
24.9Kexpo-dev-client
Build and distribute Expo development clients locally or via TestFlight
24.8K