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.

About

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.

Key Features

Automated setup for Tailwind CSS v4 and NativeWind v5
Advanced theme configuration using CSS-first @theme directives
Universal styling support for iOS, Android, and Web using react-native-css
Platform-specific media query integration for native-feeling UI
Reusable component wrappers for View, Text, Image, and ScrollView with className support
327 GitHub stars

Use Cases

Migrating an existing Expo app to Tailwind CSS v4 for modern styling capabilities
Implementing native Apple semantic colors and system fonts within a React Native project
Building a design system that maintains consistency across mobile and web platforms

About

Key Features

Automated setup for Tailwind CSS v4 and NativeWind v5
Advanced theme configuration using CSS-first @theme directives
Universal styling support for iOS, Android, and Web using react-native-css
Platform-specific media query integration for native-feeling UI
Reusable component wrappers for View, Text, Image, and ScrollView with className support
327 GitHub stars

Use Cases

Migrating an existing Expo app to Tailwind CSS v4 for modern styling capabilities
Implementing native Apple semantic colors and system fonts within a React Native project
Building a design system that maintains consistency across mobile and web platforms