Is it compatible with Expo Web?

Yes, this setup is designed specifically for universal development, ensuring your Tailwind classes work consistently on iOS, Android, and the Web.

Does this skill require a Babel configuration?

No, this setup utilizes the CSS-first approach of Tailwind v4 and NativeWind v5, which removes the need for legacy babel.config.js modifications.

How does it handle platform-specific styles?

It uses standard CSS media queries, such as @media ios and @media android, along with platformColor() functions to apply native styles across different operating systems.

What are the core dependencies for this setup?

The setup installs tailwindcss v4, nativewind v5, react-native-css, and @tailwindcss/postcss to provide a complete modern styling pipeline.

Expo Tailwind v4 Setup

Name: Expo Tailwind v4 Setup
Author: expo

byexpo

•

651

•

디자인 도구

Configures Tailwind CSS v4 and NativeWind v5 in Expo projects to enable high-performance universal styling through a CSS-first architecture.

This skill provides a standardized workflow for integrating Tailwind CSS v4 into Expo applications using NativeWind v5 and react-native-css. It automates the transition from legacy Babel-based configurations to a modern, PostCSS-driven setup that works seamlessly across iOS, Android, and Web platforms. By providing pre-configured component wrappers and custom CSS variable patterns, this skill allows developers to implement consistent design systems with platform-specific optimizations like Apple System Colors and native typography, all while maintaining the familiar Tailwind utility-first developer experience.

주요 기능

01Reusable CSS-enabled component wrappers for React Native views

02651 GitHub stars

03PostCSS-driven Tailwind CSS v4 integration for Expo

04Universal styling support for iOS, Android, and Web platforms

05Babel-free configuration using NativeWind v5 and react-native-css

06Advanced platform-specific media queries and native color support

사용 사례

01Building cross-platform design systems with platform-optimized variables

02Initializing a modern styling stack for new Expo and React Native projects

03Migrating styling workflows to Tailwind CSS v4's CSS-first configuration

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

Download Skill