expo-tailwind-setup

Configure Tailwind CSS v4 for Expo projects with NativeWind v5 and react-native-css.

2|Updated Apr 14, 2026
One-click install
npx skills add https://github.com/emilyLi2020/WAVE --skill expo-tailwind-setup-emilyli2020
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/emilyLi2020/WAVE/tree/main/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/emilyLi2020/WAVE --skill expo-tailwind-setup-emilyli2020

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Setting up Tailwind CSS v4 in Expo projects is complex due to shifting tooling requirements, outdated NativeWind v4 configuration patterns, and lack of clear guidance for cross-platform styling with react-native-css.

Core Features & Use Cases

  • Tailwind v4 + NativeWind v5 Integration: Configures Metro, PostCSS, and global CSS for Tailwind v4 to work seamlessly with Expo, eliminating the need for legacy Babel presets.
  • Cross-Platform Styling Support: Enables consistent Tailwind utility classes across iOS, Android, and Web, with built-in support for platform-specific fonts and semantic colors.
  • Reusable CSS-Wrapped Components: Provides pre-built wrappers for core React Native components (View, Text, ScrollView, etc.) that support className out of the box. Use case: A developer building a cross-platform Expo app can use this skill to get Tailwind styling working in minutes instead of hours of debugging configuration issues.

Quick Start

Use the expo-tailwind-setup skill to configure Tailwind CSS v4 for your existing Expo project with full cross-platform styling support.

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?

Setting up Tailwind CSS v4 in Expo requires configuring the Metro transformer, PostCSS plugins, and global CSS initialization using NativeWind v5 to enable cross-platform utility classes across iOS, Android, and Web.

Can I use Tailwind CSS styling for React Native components like View and Text?

Yes, you can apply Tailwind CSS styling to core React Native components like View and Text by using pre-built CSS-enabled wrappers that support the className property out of the box for universal styling.

Does NativeWind v5 work with Tailwind CSS v4 in Expo without legacy Babel presets?

Yes, NativeWind v5 works with Tailwind CSS v4 in Expo by configuring Metro and PostCSS, which eliminates the need for legacy Babel presets and seamlessly enables cross-platform styling.

What is the best way to configure cross-platform styling for iOS, Android, and Web in Expo?

The best way to configure cross-platform styling in Expo is by integrating Tailwind CSS v4 with NativeWind v5, which provides consistent utility classes and built-in support for platform-specific fonts and semantic colors.

Why does my Tailwind CSS configuration not work with my existing Expo app?

Your Tailwind CSS configuration may fail due to shifting tooling requirements and outdated NativeWind v4 patterns; using NativeWind v5 with proper Metro transformer and PostCSS setup resolves these legacy configuration issues.