expo-tailwind-setup

Name: expo-tailwind-setup
Availability: InStock
Author: json

Configure Tailwind CSS v4 in Expo projects with NativeWind and Metro setup.

Updated Feb 16, 2026

Search Tags:#css #setup #tailwind #react-native #expo #nativewind

Ready to run

npx skills add https://github.com/json-choi/yogiya --skill expo-tailwind-setup-json-choi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/json-choi/yogiya/tree/main/apps/mobile/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/json-choi/yogiya --skill expo-tailwind-setup-json-choi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Setting up Tailwind CSS in an Expo (React Native) project is complex because it requires coordinating multiple tools—Tailwind, react‑native‑css, and NativeWind—while handling platform‑specific styling and configuration without a Babel setup.

Core Features & Use Cases

Unified Styling: Enables Tailwind utility classes across iOS, Android, and Web in a single Expo codebase.
Automatic Configuration: Generates metro.config.js, postcss.config.mjs, and global CSS files, and adds necessary package resolutions.
Component Wrappers: Provides ready‑made CSS‑wrapped React Native components (View, Text, Image, etc.) for seamless className usage.
Use Case: Quickly bootstrap a new Expo app or retrofit an existing one with Tailwind styling, eliminating manual setup and platform‑specific hacks.

Quick Start

Invoke the expo-tailwind-setup skill to automatically configure Tailwind, Metro, and component wrappers in your Expo project.

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?▼

Setting up Tailwind CSS in an Expo project requires coordinating Tailwind, Metro, and PostCSS configurations alongside NativeWind to enable utility classes across iOS, Android, and Web without a Babel setup.

What is the best way to use Tailwind utility classes in React Native?▼

Using NativeWind with Tailwind CSS v4 is the best way to use Tailwind utility classes in React Native, providing CSS-wrapped component wrappers for View, Text, and Image to enable seamless className usage across platforms.

Does NativeWind with Tailwind CSS v4 require a Babel setup for Expo?▼

No, NativeWind with Tailwind CSS v4 does not require a Babel setup in Expo. It instead uses generated Metro and PostCSS configurations alongside CSS-wrapped React Native component wrappers for styling.

How do I configure Metro and PostCSS for NativeWind in Expo?▼

Configuring Metro and PostCSS for NativeWind involves generating metro.config.js and postcss.config.mjs files, adding package resolutions, and creating global CSS files to handle cross-platform styling.

Can I retrofit an existing React Native app with Tailwind styling?▼

Yes, you can retrofit an existing React Native app with Tailwind styling by applying NativeWind configurations and CSS-wrapped component wrappers, eliminating the need for manual platform-specific styling hacks.