expo-tailwind-setup
Configures Tailwind CSS v4 in an Expo project using react-native-css and NativeWind v5.
Setup & Installation
What This Skill Does
Configures Tailwind CSS v4 in an Expo project using react-native-css and NativeWind v5. Sets up Metro config, PostCSS, global CSS imports, and CSS-wrapped component primitives so className works across iOS, Android, and web.
The v4 setup removes the babel preset requirement and replaces tailwind.config.js with CSS-first theme configuration, but the migration path involves non-obvious changes to Metro config, PostCSS, and component wrapping that this skill handles in one pass.
When to use it
- Adding Tailwind utility classes to React Native components without a babel preset
- Setting up platform-specific font and color variables that resolve to iOS system colors on device
- Migrating an Expo project from NativeWind v4 and Tailwind v3 to the CSS-first v4 setup
- Building shared View, Text, and ScrollView wrappers that accept className props
- Using CSS variables like --sf-blue in JavaScript via the useCSSVariable hook
Similar Skills
ios-application-dev
A reference guide for building iOS apps with UIKit, SnapKit, and SwiftUI.
fullstack-dev
A workflow guide for building full-stack applications, covering backend architecture, frontend-backend integration, auth, real-time features, and production hardening.
android-native-dev
A reference guide for Android native development covering Kotlin/Compose patterns, Material Design 3 specs, Gradle project setup, and build troubleshooting.
frontend-dev
Builds complete frontend pages by combining UI design, scroll animations, AI-generated media assets, and copywriting into a single workflow.