skills.rest
sofia-municipality
sofia-municipalityOFFICIAL
Explore all skills by this author →
WebsiteGitHub

expo-tailwind-setup

Configures Expo projects with Tailwind CSS v4 using metro and postcss configs.

9|7|Updated Oct 6, 2025
Search Tags:#css#setup#tailwind#react-native#expo#nativewind
One-click install
npx skills add https://github.com/sofia-municipality/your-sofia-mobile --skill expo-tailwind-setup-sofia-municipality
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/sofia-municipality/your-sofia-mobile/tree/main/.github/skills/expo-tailwind-setup
Command: npx skills add https://github.com/sofia-municipality/your-sofia-mobile --skill expo-tailwind-setup-sofia-municipality

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Simplifies configuring Tailwind-powered styling in Expo apps by providing a repeatable setup that integrates NativeWind, react-native-css, and PostCSS.

Core Features & Use Cases

  • Cross-platform styling: a unified Tailwind-based workflow for iOS, Android, and Web in Expo projects.
  • Deterministic setup: explicit installation commands, Metro integration, and CSS wrapper components to enable className-based styling.
  • Migration guidance: steps to adopt Tailwind in existing React Native projects with minimal friction.

Quick Start

Install dependencies and follow the steps to configure Metro, PostCSS, and CSS wrappers for cross-platform styling.

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 Expo requires installing tailwindcss, nativewind, react-native-css, and @tailwindcss/postcss, then configuring metro.config.js and postcss.config.mjs to enable universal className-based styling.

What is NativeWind used for in React Native?▼

NativeWind is used in React Native to enable Tailwind CSS utility classes for universal cross-platform styling across iOS, Android, and Web, using CSS wrappers to translate classNames into native styles.

Does Tailwind CSS v4 work with Expo and NativeWind v5?▼

Yes, Tailwind CSS v4 works with Expo and NativeWind v5 by integrating react-native-css and @tailwindcss/postcss. This configuration enables deterministic cross-platform styling through Metro and PostCSS setups.

Can I migrate an existing React Native project to use Tailwind CSS?▼

Yes, you can migrate an existing React Native project to Tailwind CSS by following explicit installation commands and Metro integration steps to adopt className-based styling with minimal friction.

Why does Tailwind CSS not work in my Expo app after installation?▼

Tailwind CSS may not work in your Expo app if metro.config.js and postcss.config.mjs are not properly configured with react-native-css and @tailwindcss/postcss to enable the CSS wrappers required for className styling.

Related Skills

Explore More Software Engineering Skills→
msichtermanmsichterman

expo-tailwind-setup

Integrates Tailwind CSS v4 with Expo using NativeWind v5 and react-native-css via Metro and PostCSS configuration.

Community
Intermediate
GeekKingCloudGeekKingCloud
6

handoff

Generate structured HANDOFF.md notes capturing coding work status, progress, and next steps.

Community
Intermediate
mjamoremjamore

expo-tailwind-setup

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

Community
Intermediate
luthebaoluthebao
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo applications.

Community
Intermediate