Does this skill require a Babel configuration for styling?

No, Tailwind v4 and NativeWind v5 utilize a CSS-first approach that removes the need for NativeWind presets in your babel.config.js.

How are platform-specific styles handled in this setup?

Platform-specific styles are defined directly in your CSS files using native-aware media queries like @media ios and @media android to set variables or themes.

Can I use standard React Native components directly with classNames?

React-native-css requires components to be wrapped. This skill provides the implementation patterns to wrap components like View, Text, and Image using the useCssElement hook.

Does this support Tailwind v4's new @theme block?

Yes, this setup is designed specifically for Tailwind v4 and uses @theme blocks in global.css instead of a tailwind.config.js file.

Tailwind v4 Expo & NativeWind Setup

Name: Tailwind v4 Expo & NativeWind Setup
Author: marcoodignoti

bymarcoodignoti

Mobile Development

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

About

This skill provides a comprehensive configuration guide and implementation pattern for integrating the modern Tailwind CSS v4 engine into Expo applications. It leverages NativeWind v5 and react-native-css to enable a CSS-first workflow, providing specialized component wrappers for React Native elements, platform-specific media queries, and support for Apple semantic system colors. By eliminating legacy Babel configurations and adopting the @tailwindcss/postcss plugin, it offers a more performant and standardized approach to building production-grade cross-platform interfaces.

Key Features

Tailwind CSS v4 integration with modern CSS-first configuration
Universal styling support for iOS, Android, and Web using NativeWind v5
Platform-specific styling using CSS media queries (@media ios/android)
Support for Apple semantic colors and CSS variables in JavaScript hooks
Pre-configured component wrappers for className support via useCssElement
0 GitHub stars

Use Cases

Initializing a new Expo project with the latest Tailwind CSS v4 utility engine
Migrating an existing NativeWind project to the v5 CSS-first architecture
Creating a shared design system with platform-aware CSS variables

About

Key Features

Tailwind CSS v4 integration with modern CSS-first configuration
Universal styling support for iOS, Android, and Web using NativeWind v5
Platform-specific styling using CSS media queries (@media ios/android)
Support for Apple semantic colors and CSS variables in JavaScript hooks
Pre-configured component wrappers for className support via useCssElement
0 GitHub stars

Use Cases

Initializing a new Expo project with the latest Tailwind CSS v4 utility engine
Migrating an existing NativeWind project to the v5 CSS-first architecture
Creating a shared design system with platform-aware CSS variables