skills.rest
elcokiin
elcokiinCOMMUNITY
Explore all skills by this author →
Website𝕏@elcokiinGitHub

expo-tailwind-setup

Configures Tailwind CSS v4 in Expo projects using react-native-css and NativeWind v5.

Updated Mar 19, 2026
Search Tags:#styling#cross-platform#tailwind css#react native#expo#nativewind#metro config
One-click install
npx skills add https://github.com/elcokiin/vibe-tribe --skill expo-tailwind-setup-elcokiin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/elcokiin/vibe-tribe/tree/main/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/elcokiin/vibe-tribe --skill expo-tailwind-setup-elcokiin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, nativewind, react-native-css, @tailwindcss/postcss, tailwind-merge, clsx.

What problem does it solve? Setting up Tailwind CSS v4 in an Expo React Native project involves many breaking changes from NativeWind v4, including new Metro and PostCSS configs, CSS-first theming, and the removal of Babel presets. This Skill provides the exact configuration steps and component wrappers needed to get universal styling working across iOS, Android, and Web. ## Core Features & Use Cases - Complete configuration guide: Covers Metro config with withNativewind, PostCSS with @tailwindcss/postcss, and global.css with Tailwind v4 imports. - CSS component wrappers: Provides ready-to-use View, Text, ScrollView, Pressable, Image, and Animated components wrapped with useCssElement for className support. - Platform-specific theming: Shows how to use @media ios/android queries, platformColor(), light-dark(), and @theme variables for Apple system colors and custom fonts. - Use Case: You are starting a new Expo app in a monorepo and want Tailwind utility classes like className="flex-1 bg-white p-4" to work on native and web without maintaining separate style objects. ## Quick Start Set up Tailwind CSS v4 with NativeWind v5 in my Expo app, including the Metro config, global.css, and CSS-wrapped components.

Frequently Asked Questions about expo-tailwind-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Tailwind CSS v4 in an Expo project?▼

Install tailwindcss v4, nativewind v5 preview, react-native-css, and @tailwindcss/postcss, then configure Metro with withNativewind, add a PostCSS config, and create a global.css importing tailwindcss layers. No babel.config.js is needed with this setup.

How to use className on React Native components with NativeWind v5?▼

Wrap React Native components with the useCssElement hook from react-native-css, mapping className to the style prop. Create reusable wrappers for View, Text, ScrollView, Pressable, and Image, then import them instead of the raw React Native components.

Does NativeWind v5 need a babel.config.js?▼

No, NativeWind v5 with Tailwind v4 uses a CSS-first configuration and does not require a babel.config.js. You should remove any nativewind/babel presets and jsxImportSource settings from previous NativeWind v4 setups.

What is the difference between NativeWind v4 and NativeWind v5?▼

NativeWind v5 removes the Babel preset, uses @tailwindcss/postcss instead of the tailwindcss PostCSS plugin, replaces @tailwind directives with CSS imports, configures themes via @theme in CSS instead of tailwind.config.js, and requires useCssElement wrappers for className support.

Why are Tailwind styles not applying in my Expo app?▼

Check that your global.css is imported in the app entry, that components are wrapped with useCssElement rather than used directly from react-native, and that the Metro config applies withNativewind with inlineVariables set to false.

Can I use iOS system colors with Tailwind in Expo?▼

Yes, define CSS variables using platformColor() inside @media ios blocks with light-dark() fallbacks for web and Android, then register them as Tailwind theme colors via @theme. Use classes like text-sf-text or bg-sf-bg in your components.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced
keremtoker468-dotcomkeremtoker468-dotcom

expo-tailwind-setup

Install and configure Tailwind CSS v4 with NativeWind v5 in Expo projects.

Community
Intermediate
pythoninthegrassespythoninthegrasses
1

tailwind-design-system

Design Tailwind design systems with semantic tokens, CVA variants, and dark mode.

Official
Advanced
TechCorp25TechCorp25

expo-tailwind-setup

Configures Tailwind CSS v4 in Expo projects using react-native-css and NativeWind v5.

Community
Intermediate