skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

expo-tailwind-setup

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

1|Updated Aug 17, 2025
Search Tags:#styling#cross-platform#tailwind css#react native#expo#nativewind#metro config
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill expo-tailwind-setup-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/expo-tailwind-setup
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill expo-tailwind-setup-ratnesh-maurya

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 in Expo React Native projects involves confusing configuration across Metro, PostCSS, and component wrappers, and the v4/v5 toolchain differs significantly from older NativeWind setups. This Skill provides the complete, correct configuration path for universal styling across iOS, Android, and Web. ## Core Features & Use Cases - Full toolchain configuration: Metro config with withNativewind, PostCSS with @tailwindcss/postcss, and global.css with Tailwind v4 imports, with no babel.config.js required. - CSS component wrappers: Ready-to-use className-enabled components (View, Text, ScrollView, Image, Pressable, TextInput) built with useCssElement from react-native-css. - Platform-specific theming: Custom @theme variables, iOS/Android media queries, and Apple system colors via platformColor and light-dark(). - Use Case: You are starting a new Expo app and want utility-class styling like className="flex-1 bg-white p-4" to work natively on iOS, Android, and Web without ejecting or writing custom style objects. ## Quick Start Set up Tailwind CSS v4 with NativeWind v5 and react-native-css in my Expo project, including Metro config, global.css, and the wrapped component library.

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 in an Expo React Native 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 Tailwind layers. Wrap React Native components with useCssElement to enable className support.

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

NativeWind v5 uses CSS-first configuration with Tailwind v4, eliminating babel.config.js and tailwind.config.js. It uses @import statements instead of @tailwind directives, @theme blocks in CSS instead of JS theme config, and requires explicit component wrapping with useCssElement.

Does Tailwind CSS work on both iOS and Android in Expo?▼

Yes, react-native-css and NativeWind v5 provide universal styling across iOS, Android, and Web. Platform-specific values can be defined using @media ios and @media android blocks in your global CSS file.

Why are my Tailwind styles not applying in Expo?▼

Styles fail when the global CSS file is not imported in the app entry, components are not wrapped with useCssElement, or the Metro config lacks withNativewind. Verify all three configuration points before debugging further.

Can I use iOS system colors with Tailwind in React Native?▼

Yes, define CSS variables using platformColor(systemBlue) and similar inside @media ios blocks, with light-dark() fallbacks for other platforms. Register them as Tailwind theme colors via @theme to use classes like text-sf-text.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

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

Community
Advanced
expoexpo
2.4k

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 in Expo applications.

Official
Intermediate
launchapp-devlaunchapp-dev
38

theming-system

Design scalable theming architecture with layered tokens for runtime theme switching.

Official
Advanced
bughqbughq
2

stacks-crosswind

Generate optimized CSS from utility classes and custom rules in Bun-based Stacks applications.

Official
Intermediate