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
@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
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
More in Mobile
vercel-react-native-skills
React Native best practices: performance, navigation, native modules, and platform APIs
vercel-labs/agent-skillssleek-design-mobile-apps
Mobile-first design patterns for iOS and Android: gestures, safe areas, and native feel
sleekdotdesign/agent-skillsbuilding-native-ui
Expo native UI components: lists, modals, tabs, bottom sheets, and haptics
expo/skillsnative-data-fetching
Data fetching for native apps: offline caching, background refresh, and sync patterns
expo/skillsupgrading-expo
Expo SDK upgrade guide covering breaking changes, native module compatibility, and migration steps
expo/skills