Does this require a Babel configuration?

No, one of the primary benefits of Tailwind v4 and NativeWind v5 is that they eliminate the need for a babel.config.js for Tailwind processing.

Is this compatible with Expo Router?

Absolutely. The skill provides specific wrappers for Expo Router's Link component to ensure it supports Tailwind class names.

How are styles applied to native components?

It uses the react-native-css runtime and the useCssElement hook to wrap standard React Native components, enabling them to interpret className props as native styles.

What versions of Tailwind does this skill support?

This skill is specifically designed for Tailwind CSS v4 and NativeWind v5, utilizing the latest CSS-first configuration patterns.

Can I use platform-specific colors like iOS system colors?

Yes, the skill includes implementation patterns for using platformColor() within @media ios blocks and mapping them to Tailwind theme variables.

Expo Tailwind CSS Setup

Name: Expo Tailwind CSS Setup
Author: expo

byexpo

•

327

•

Mobile Development

Configures Tailwind CSS v4 and NativeWind v5 in Expo projects for seamless, universal styling across mobile and web.

This skill streamlines the integration of Tailwind CSS v4 into Expo applications by leveraging NativeWind v5 and react-native-css. It provides a comprehensive framework for universal styling, including pre-configured Metro and PostCSS setups, reusable CSS-wrapped components for high-performance rendering, and support for platform-specific media queries. It is ideal for developers building cross-platform React Native apps who want the speed and flexibility of Tailwind's utility-first approach without compromising on native performance or platform-specific design systems like Apple's semantic colors.

주요 기능

01Automated setup for Tailwind CSS v4 and NativeWind v5

02Advanced theme configuration using CSS-first @theme directives

03Universal styling support for iOS, Android, and Web using react-native-css

04Platform-specific media query integration for native-feeling UI

05Reusable component wrappers for View, Text, Image, and ScrollView with className support

06327 GitHub stars

사용 사례

01Migrating an existing Expo app to Tailwind CSS v4 for modern styling capabilities

02Implementing native Apple semantic colors and system fonts within a React Native project

03Building a design system that maintains consistency across mobile and web platforms

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add expo/skills tailwind-setup

For use in Claude.ai and ChatGPT

Download Skill