expo-tailwind-setup

Integrate Tailwind CSS with Expo projects using NativeWind v5 and react-native-css.

Updated Nov 21, 2025
One-click install
npx skills add https://github.com/NathanColosimo/kompose --skill expo-tailwind-setup-nathancolosimo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/NathanColosimo/kompose/tree/main/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/NathanColosimo/kompose --skill expo-tailwind-setup-nathancolosimo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide solves the challenge of achieving consistent Tailwind-styled UI across Expo's web, iOS, and Android environments by integrating Tailwind CSS with NativeWind and react-native-css in Expo projects.

Core Features & Use Cases

  • Tailwind CSS v4 - unified utility-first styling across platforms
  • react-native-css - CSS runtime for React Native styles
  • NativeWind v5 - Tailwind integration for React Native with Metro transformer
  • PostCSS plugin - @tailwindcss/postcss for processing styles
  • No Babel config needed; Metro-based setup works out of the box
  • Platform-specific CSS and CSS variable strategy for cross-platform theming
  • Use Case: Build a single codebase to style web and mobile UIs consistently.

Quick Start

Initialize a new Expo project and enable Tailwind with NativeWind 5 and react-native-css.

Frequently Asked Questions about expo-tailwind-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Tailwind CSS in an Expo project for iOS, Android, and Web?▼

You can unify styling across platforms by integrating Tailwind CSS v4 with NativeWind v5 and react-native-css in your Expo project. This approach uses PostCSS to generate platform-aware styles at build time, enabling consistent className-based styling across iOS, Android, and Web.

Do I need Babel config to use Tailwind CSS with NativeWind v5 in Expo?▼

No Babel config is needed to use Tailwind CSS with NativeWind v5 in Expo. The setup relies on a Metro-based configuration using PostCSS with @tailwindcss/postcss to process styles, which works out of the box without modifying your Babel configuration.

How does react-native-css handle Tailwind styles across mobile and web?▼

react-native-css acts as a CSS runtime for React Native styles, working with NativeWind v5's Metro transformer to process Tailwind CSS v4. It enables platform-specific CSS and CSS variable strategies for cross-platform theming, ensuring UI consistency across mobile and web environments.

What is the best way to achieve consistent UI styling across Expo web and mobile?▼

The best way to achieve consistent UI styling across Expo web and mobile is using NativeWind v5 with Tailwind CSS v4 and react-native-css. This stack allows you to build a single codebase with utility-first styling, processing platform-aware CSS at build time via PostCSS.

Can I use Tailwind CSS v4 with Expo without complex Babel modifications?▼

Yes, you can use Tailwind CSS v4 with Expo without complex Babel modifications. This setup uses PostCSS with @tailwindcss/postcss and a Metro transformer to handle style generation at build time, requiring no Babel config while providing consistent className-based styling.

Does NativeWind v5 support CSS variables for cross-platform theming in Expo?▼

Yes, NativeWind v5 supports CSS variables for cross-platform theming in Expo. By integrating with react-native-css and Tailwind CSS v4, it implements a platform-specific CSS and CSS variable strategy to unify themes across iOS, Android, and Web environments.