skills.rest
json-choi
json-choiCOMMUNITY
Explore all skills by this author →
GitHub

expo-tailwind-setup

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
One-click install
npx skills add https://github.com/json-choi/yogiya --skill expo-tailwind-setup-json-choi
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
pabloimrik17pabloimrik17

expo-dependency-check

Validate Expo project dependencies and optionally update incompatible versions via expo install --check/--fix.

Community
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
pascallammerspascallammers
1

tailwind-design-system

Generate Tailwind CSS design systems with custom themes and design tokens.

Community
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

react-native-web-styling

Provide styling patterns for React Native Web components using StyleSheet, theming, and responsive design.

Official
Intermediate