Agent skill · software engineering · sickn33
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 setup instructions and configuration files for integrating Tailwind CSS with Expo and React Native, which 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 6k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Tailwind CSS Setup for Expo with react-native-css When to Use Use this skill when you need set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/expo-tailwind-setup