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