expo-tailwind-setup

Installation
Summary

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
SKILL.md

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
Related skills
Installs
26.9K
Repository
expo/skills
GitHub Stars
1.9K
First Seen
Jan 19, 2026