skills.rest
magicappdev
magicappdevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tailwind-setup

Automate Tailwind CSS v4 setup for Expo apps with NativeWind v5.

2|Updated Jan 19, 2026
Search Tags:#cross-platform#setup#tailwind#expo#nativewind#metro-config#react-native-css
One-click install
npx skills add https://github.com/magicappdev/magicappdev --skill tailwind-setup-magicappdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-setup
Source: https://github.com/magicappdev/magicappdev/tree/main/.gemini/skills/expo-app-design/tailwind-setup
Command: npx skills add https://github.com/magicappdev/magicappdev --skill tailwind-setup-magicappdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS integration in Expo apps can be tedious and fragmented across platforms; this Skill provides a clear path to configure Tailwind v4 with react-native-css and NativeWind v5 for universal styling on iOS, Android, and Web.

Core Features & Use Cases

  • Unified styling: Setup Tailwind v4 across Expo projects using NativeWind and react-native-css to share styles between web and native.
  • Config guidance: Includes Metro, PostCSS, and global CSS configuration to ensure consistent theming.
  • Use Case: Imagine building a cross-platform Expo app with a single design system; this Skill standardizes the styling pipeline and reduces platform-specific CSS drift.

Quick Start

Install dependencies and create configuration files as described, then wire up Tailwind styles in your app entry and start the Expo project.

Frequently Asked Questions about 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 app for iOS, Android, and Web?▼

Setting up Tailwind CSS in an Expo app requires configuring NativeWind v5 and react-native-css to establish a unified styling system across iOS, Android, and Web. You must create Metro and PostCSS configuration files alongside Tailwind CSS v4 to share styles between native and web.

Can I use NativeWind v5 with Tailwind CSS v4 in a cross-platform Expo project?▼

Yes, NativeWind v5 works with Tailwind CSS v4 in cross-platform Expo projects to provide unified styling. This setup leverages react-native-css to ensure consistent theming and shared styles across mobile and web platforms without platform-specific CSS drift.

What configurations are needed to integrate Tailwind v4 into an Expo application?▼

Integrating Tailwind v4 into an Expo application requires creating Metro and PostCSS configuration files, plus a global CSS file. These configurations wire together NativeWind v5 and react-native-css to connect the Tailwind styling pipeline to your app entry point.

Why does my Tailwind styling not apply consistently across Expo mobile and web?▼

Tailwind styling may not apply consistently across Expo mobile and web due to missing Metro or PostCSS configurations. A unified styling system requires properly wiring NativeWind v5 and react-native-css to standardize the pipeline and prevent platform-specific CSS drift.

What is the best way to configure a unified styling system for an Expo app?▼

The best way to configure a unified styling system for an Expo app is using Tailwind CSS v4 with NativeWind v5 and react-native-css. This approach standardizes the styling pipeline by applying Metro and PostCSS configurations to share a single design system across platforms.

Do I need react-native-css to use Tailwind v4 with NativeWind v5 in Expo?▼

Yes, react-native-css is required to use Tailwind v4 with NativeWind v5 in Expo. It acts as the bridge for applying Tailwind styles across iOS, Android, and Web, ensuring the unified styling system functions correctly across all platforms.

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
yurkennyurkenn
1

tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind and react-native-css.

Community
Intermediate
bidahbidah
28

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 in Expo projects.

Community
Intermediate
eusouwillnuneseusouwillnunes

copywriter:pagina-de-vendas

Generate long-form sales page copy from headline through CTA.

Community
Intermediate