Agent skill · software engineering · aiskillstore
expo-tailwind-setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
Why this skill is useful
Provides specific configuration patterns and commands for integrating Tailwind CSS with Expo and React Native that the AI wouldn't reliably generate on its own.
What it needs
Requires @tailwindcss/postcss, clsx, expo, nativewind, react-native-css, tailwind-merge, tailwindcss installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Add resolutions for lightningcss compatibility: autoprefixer is not needed in Expo because of lightningcss postcss is included in expo by default Configuration Files Metro Config Create or update metro.config.js: PostCSS Config Create postcss.config.mjs: Global CSS Create src/global.css: IMPORTANT: No Babel Config Needed With Tailwind v4 and NativeWind v5, you do NOT need a babel.config.js for Tailwind. Remove any NativeWind babel presets if present: CSS Component Wrappers Since react-native-css requires explicit CSS element wrapping, create reusable components: Main Components (src/tw/index.tsx) Image Component (src/tw/image.tsx) Animated Components (src/tw/animated.tsx) Usage Import CSS-wrapped components from your tw directory: Custom Theme Variables Add custom theme variables in your global.css using @theme: Platform-Specific Styles Use platform media queries for platform-specific styling: Apple System Colors with CSS Variables Create a CSS file for Apple semantic colors: Then use in components: Using CSS Variables in JavaScript Use the useCSSVariable hook: Key Differences from NativeWind v4 / Tailwind v3 1. No babel.config.js - Configuration is now CSS-first 2. PostCSS plugin - Uses @tailwindcss/postcss instead of tailwindcss 3. CSS imports - Use @import "tailwindcss/..." instead of @tailwind directives 4. Theme config - Use @theme in CSS instead of tailwind.config.js 5. Component wrappers - Must wrap components with useCssElement for className support 6. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/expo-tailwind-setup