How are standard React Native components handled with this setup?

The skill provides a set of optimized component wrappers (View, Text, Image, etc.) that use the useCssElement hook to enable className support.

Does this setup require a Babel configuration?

No, with Tailwind CSS v4 and NativeWind v5, the configuration is now CSS-first, which eliminates the need for a Babel plugin for styling.

Can I use this for web and mobile simultaneously?

Yes, this skill is specifically designed for universal styling, ensuring your Tailwind classes work consistently across iOS, Android, and Web.

Is it compatible with platform-specific colors like SF Pro?

Yes, it includes patterns for using CSS variables and media queries to support native platform colors like Apple's systemBlue or systemBackground.

Expo Tailwind CSS v4 Setup

Name: Expo Tailwind CSS v4 Setup
Author: expo

byexpo

•

1,643

•

Mobile Development

Configures Tailwind CSS v4 and NativeWind v5 for universal styling in Expo projects across iOS, Android, and Web.

This skill provides a comprehensive configuration for integrating Tailwind CSS v4 into Expo applications using NativeWind v5 and the react-native-css runtime. It automates the setup of modern CSS-first workflows, including Metro and PostCSS configurations, platform-specific media queries, and essential component wrappers. By leveraging this skill, developers can achieve high-performance, universal styling with Tailwind utilities while maintaining full support for native platform features like Apple System Colors and fluid responsive design.

Key Features

01Tailwind CSS v4 integration with modern CSS-first configuration

02NativeWind v5 and react-native-css setup for high-performance styling

031,643 GitHub stars

04Universal support for iOS, Android, and Web platforms

05Ready-to-use CSS component wrappers for common React Native elements

06Pre-configured PostCSS and Metro bundler integrations

Use Cases

01Building cross-platform design systems that require platform-specific CSS variables

02Migrating existing React Native projects to the NativeWind v5 CSS-first architecture

03Bootstrapping a new Expo project with a modern Tailwind CSS styling system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add expo/skills expo-tailwind-setup

For use in Claude.ai and ChatGPT