How do I use className on standard React Native components?

The skill provides a pattern using the useCssElement hook to wrap standard React Native components, enabling them to accept and process the className prop.

Is this setup compatible with Expo Web?

Yes, it is designed for universal styling across iOS, Android, and Web, utilizing CSS media queries and light-dark() functions for cross-platform support.

Does this skill require a Babel configuration?

No, with Tailwind v4 and NativeWind v5, the configuration is CSS-first. This setup removes the need for NativeWind babel presets in your babel.config.js.

Can I use native platform colors like Apple's systemBlue?

Yes, the setup includes specific patterns for using platformColor() within CSS variables and platform-specific media queries.

Tailwind v4 Expo Setup

Name: Tailwind v4 Expo Setup
Author: gigs-slc

bygigs-slc

0•

Mobile Development

Configures Tailwind CSS v4 with NativeWind v5 and react-native-css for high-performance universal styling in Expo apps.

This skill streamlines the integration of Tailwind CSS v4 into Expo projects, leveraging the latest NativeWind v5 and react-native-css runtime. It eliminates traditional Babel dependencies in favor of a CSS-first configuration, providing a robust architecture for universal styling across iOS, Android, and Web. By implementing reusable CSS-wrapped components and platform-specific media queries, it enables developers to use standard Tailwind utility classes while maintaining native performance and full access to system-level design tokens like Apple's platform colors.

主な機能

01NativeWind v5 integration with Metro transformer

02Reusable CSS-wrapped component patterns for className support

03Native platform color integration via CSS variables

040 GitHub stars

05Tailwind CSS v4 CSS-first configuration

06Platform-specific media queries for iOS, Android, and Web

ユースケース

01Building universal design systems that maintain native feel on mobile and web

02Setting up a new Expo project with the latest Tailwind CSS v4 stack

03Migrating legacy NativeWind projects to the modern CSS-first architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gigs-slc/react-native-skills tailwind-setup

For use in Claude.ai and ChatGPT

Download Skill