skills.rest
qbstabletampa-creator
qbstabletampa-creatorCOMMUNITY
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 28, 2026
Search Tags:#styling#React Native#Expo#tailwind css#NativeWind#metro config#universal apps
One-click install
npx skills add https://github.com/qbstabletampa-creator/firmware-foundation-studios --skill expo-tailwind-setup-qbstabletampa-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/qbstabletampa-creator/firmware-foundation-studios/tree/main/archive/apps/manna-catch/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/qbstabletampa-creator/firmware-foundation-studios --skill expo-tailwind-setup-qbstabletampa-creator

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 coordinating Metro, PostCSS, and CSS runtime configuration across iOS, Android, and Web, and the v4/v5 toolchain differs significantly from older NativeWind setups, causing frequent misconfiguration. ## Core Features & Use Cases - Complete toolchain setup: Installs and configures Tailwind CSS v4, NativeWind v5, react-native-css, and @tailwindcss/postcss with Metro and PostCSS config files. - CSS component wrappers: Provides ready-made className-enabled wrappers for View, Text, ScrollView, Pressable, TextInput, Image, and Animated components using useCssElement. - Theming and platform styling: Covers custom @theme variables, platform media queries, Apple system colors via platformColor, and the useCSSVariable hook. - Use Case: When starting a new Expo app, apply this Skill to wire up universal Tailwind styling, then write className-based styles like "flex-1 bg-white" directly on wrapped React Native 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 React Native project?▼

Install tailwindcss v4, nativewind v5 preview, react-native-css, and @tailwindcss/postcss, then configure Metro with withNativewind 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 @theme in CSS instead of tailwind.config.js, requires no babel.config.js, and uses @import statements instead of @tailwind directives. Components must be wrapped with useCssElement for className support.

Does Tailwind v4 in Expo need a babel config?▼

No, Tailwind v4 with NativeWind v5 does not require babel.config.js. Remove any NativeWind babel presets, as configuration is now handled through CSS and the Metro withNativewind wrapper.

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

Check that the global CSS file is imported in your app entry, components are wrapped with useCssElement, and the Metro config applies withNativewind. Unwrapped React Native components do not process className props.

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

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

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

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

Community
Advanced
luthebaoluthebao
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo applications.

Community
Intermediate
vuralserhat86vuralserhat86
43

design_tokens

Define design tokens for spacing, typography, and color systems.

Community
Intermediate
sombeksombek

gluestack-ui-v5:setup

Installs and configures gluestack-ui v5 with NativeWind v5 or UniWind on Tailwind CSS v4.

Community
Intermediate