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

0•

Mobile Development

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

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

01Tailwind CSS v4 integration with modern CSS-first configuration

02Universal styling support for iOS, Android, and Web using NativeWind v5

03Platform-specific styling using CSS media queries (@media ios/android)

04Support for Apple semantic colors and CSS variables in JavaScript hooks

05Pre-configured component wrappers for className support via useCssElement

060 GitHub stars

Use Cases

01Initializing a new Expo project with the latest Tailwind CSS v4 utility engine

02Migrating an existing NativeWind project to the v5 CSS-first architecture

03Creating a shared design system with platform-aware CSS variables

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add marcoodignoti/couple-diary tailwind-setup

For use in Claude.ai and ChatGPT

Download Skill