skills.rest
AIBiz-Automatyzacje
AIBiz-AutomatyzacjeCOMMUNITY
Explore all skills by this author →
GitHub

expo-tailwind-setup

Configures Tailwind CSS v4 with NativeWind v5 and react-native-css for universal Expo styling.

16|1|Updated May 5, 2026
Search Tags:#styling#tailwind css#setup#react native#expo#nativewind#metro config
One-click install
npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-tailwind-setup-aibiz-automatyzacje
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/AIBiz-Automatyzacje/workspace-template-mobile/tree/main/.claude/skills/expo-tailwind-setup
Command: npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-tailwind-setup-aibiz-automatyzacje

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 an Expo (React Native) project involves many moving parts—Metro config, PostCSS, CSS-first theming, and component wrappers—and the v4/v5 toolchain differs significantly from older NativeWind setups, causing broken styles and confusion. ## Core Features & Use Cases - Complete toolchain setup: Installs and configures Tailwind CSS v4, NativeWind v5, react-native-css, and @tailwindcss/postcss with correct Metro and PostCSS configs. - CSS-enabled component wrappers: Provides ready-made useCssElement-wrapped components (View, Text, ScrollView, Image, Pressable) so className works in React Native. - Platform-specific theming: Supports iOS/Android media queries, Apple system colors via platformColor(), light/dark mode with light-dark(), and custom @theme variables. - Use Case: You are starting a new Expo app and want utility-class styling like className="flex-1 bg-white p-4" across iOS, Android, and web—this Skill walks through the full installation, config files, and wrapper components. ## Quick Start Set up Tailwind CSS v4 with NativeWind v5 in my Expo project so I can use className styling on React Native 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 in an Expo React Native project?▼

Install tailwindcss v4, nativewind v5 preview, react-native-css, and @tailwindcss/postcss, then configure Metro with withNativewind and add a PostCSS config. Create a global.css importing Tailwind layers and wrap components with useCssElement to enable className support.

NativeWind v5 vs v4: what changed for Expo setup?▼

NativeWind v5 with Tailwind v4 removes the babel.config.js requirement entirely and uses CSS-first configuration. Theme config moves from tailwind.config.js to @theme blocks in CSS, and PostCSS uses @tailwindcss/postcss instead of the tailwindcss plugin.

Does Tailwind className work on React Native components?▼

Not by default—react-native-css requires explicit wrapping with useCssElement for each component. The setup provides pre-wrapped View, Text, ScrollView, Pressable, TextInput, and Image components that map className to the style prop.

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. Register them as Tailwind theme colors via @theme so classes like text-sf-text and bg-sf-bg work.

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

Common causes are a missing global.css import in the app entry, components not wrapped with useCssElement, or Metro config lacking withNativewind. Also verify inlineVariables is set to false if using PlatformColor in CSS variables.

Related Skills

Explore More Software Engineering Skills→
skillcreatoraiskillcreatorai
1.1k

expo-app-design

Configure Expo Router and NativeWind for cross-platform React Native app development.

Community
Basic
EvanBaconEvanBacon
571

reusable-ui-components

Design portable native-first UI components for Expo Router projects.

Community
Basic
lossless-grouplossless-group
4

theme-system

Implement three-mode theme systems with two-tier CSS tokens for Astro Knots sites.

Official
Intermediate
petrogurcakpetrogurcak

expo-workflow

Guide React Native and Expo development with a docs-first workflow.

Community
Advanced