expo-tailwind-setup

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

Updated Feb 3, 2026
One-click install
npx skills add https://github.com/msichterman/templatesick --skill expo-tailwind-setup-msichterman
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/msichterman/templatesick/tree/main/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/msichterman/templatesick --skill expo-tailwind-setup-msichterman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Expo projects often struggle with achieving consistent cross-platform styling and a unified design system. This Skill provides a guided setup to integrate Tailwind CSS v4 using react-native-css and NativeWind v5, enabling a CSS-first workflow that works across iOS, Android, and web.

Core Features & Use Cases

  • Tailwind CSS v4 integration in Expo with NativeWind v5 and react-native-css
  • Metro config integration and PostCSS plugin setup to enable Tailwind in React Native and web code
  • Global CSS, platform-specific font handling, and CSS variable utilities for a cohesive design system
  • No Babel config required, CSS-first theming approach, and component wrappers for className support

Quick Start

Install dependencies and configure the project as described: install tailwindcss@^4, nativewind@5, react-native-css, and postcss; update metro.config.js to use withNativewind; add postcss.config.mjs; create a global CSS file with Tailwind imports; remove any Babel presets if present; start the 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 Expo requires installing Tailwind CSS v4, NativeWind v5, react-native-css, and PostCSS, then configuring metro.config.js and postcss.config.mjs to enable a unified CSS-first workflow across native and web.

Does NativeWind v5 work with Tailwind CSS v4 in React Native?

NativeWind v5 works with Tailwind CSS v4 in React Native by utilizing react-native-css and PostCSS configurations, delivering a consistent cross-platform UI without requiring any Babel config presets.

What is the best way to achieve consistent cross-platform styling in Expo?

The best way to achieve consistent cross-platform styling in Expo is integrating Tailwind CSS v4 with NativeWind v5 and react-native-css, using a CSS-first theming approach with global CSS and platform-specific font handling.

Do I need Babel config to use Tailwind CSS in an Expo app?

You do not need Babel config to use Tailwind CSS in an Expo app with NativeWind v5. The setup uses a CSS-first approach and requires removing any existing Babel presets to avoid configuration conflicts.

Why is my Expo Tailwind CSS setup not working across native and web?

Your Expo Tailwind CSS setup may not work across native and web if your Metro and PostCSS configurations are incorrect. You must update metro.config.js with withNativewind and add a global CSS file with Tailwind imports.