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.