skills.rest
TechCorp25
TechCorp25COMMUNITY
Explore all skills by this author →
GitHub

expo-tailwind-setup

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

Updated May 20, 2026
Search Tags:#styling#cross-platform#tailwind css#react native#expo#nativewind#metro config
One-click install
npx skills add https://github.com/TechCorp25/kingdom --skill expo-tailwind-setup-techcorp25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/TechCorp25/kingdom/tree/main/.claude/skills/use-expo/expo-tailwind-setup
Command: npx skills add https://github.com/TechCorp25/kingdom --skill expo-tailwind-setup-techcorp25

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 CSS files, and NativeWind v5 changed the setup significantly from v4, leaving many developers with outdated babel-based instructions that no longer work. ## Core Features & Use Cases - Complete configuration setup: Provides Metro config with withNativewind, PostCSS config with @tailwindcss/postcss, and a global.css using Tailwind v4 CSS-first imports. - CSS component wrappers: Supplies ready-to-use wrappers (View, Text, ScrollView, Image, Pressable, TextInput) built on useCssElement so className props work in React Native. - Platform-specific theming: Covers @theme custom variables, iOS/Android media queries, and Apple system colors via platformColor and light-dark functions. - Use Case: You are starting a new Expo app and want utility-class styling across iOS, Android, and Web; follow the guide to install dependencies, wire up Metro and PostCSS, and immediately write className-based components. ## Quick Start Set up Tailwind CSS v4 with NativeWind v5 in my Expo project and create the CSS-wrapped components I need to use className styling.

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 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 components with useCssElement to enable className props.

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

NativeWind v5 removes the babel.config.js requirement and uses CSS-first configuration with @import statements and @theme blocks instead of tailwind.config.js. It also requires wrapping components with useCssElement from react-native-css for className support.

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

Yes, this setup targets iOS, Android, and Web universally. Platform-specific styling uses @media ios and @media android queries in CSS, and iOS can access native system colors via platformColor().

Do I need babel.config.js for NativeWind v5?▼

No, NativeWind v5 with Tailwind v4 does not need a babel config. Remove any nativewind/babel presets and jsxImportSource settings, since configuration is now handled through Metro, PostCSS, and CSS files.

Why are my Tailwind styles not applying in React Native?▼

Styles fail when components are not wrapped with useCssElement, the global CSS file is not imported in the app entry, or the Metro config lacks withNativewind. Verify all three and confirm className is mapped to the style prop.

How do I use Apple system colors with Tailwind in Expo?▼

Define CSS variables using platformColor() inside an @media ios block, with light-dark() fallbacks for other platforms, then register them as Tailwind theme colors via @theme. Use classes like text-sf-text or bg-sf-bg in 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
SimyVSimyV

tailwind-theming

Centralize Tailwind UI theming with reusable CSS variable tokens.

Community
Intermediate
expoexpo
2.5k

expo-design-system

Build and audit design token themes and reusable components in Expo apps.

Official
Intermediate