skills.rest
mjamore
mjamoreCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-tailwind-setup

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

Updated Jan 23, 2026
Search Tags:#tailwind#expo#metro#nativewind#postcss#react-native-css#mobile-styling
One-click install
npx skills add https://github.com/mjamore/ticked-off --skill expo-tailwind-setup-mjamore
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/mjamore/ticked-off/tree/main/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/mjamore/ticked-off --skill expo-tailwind-setup-mjamore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide removes the friction of configuring Tailwind CSS v4 in Expo projects by providing a CSS-first workflow and platform-aware configuration so styles work consistently on iOS, Android, and web.

Core Features & Use Cases

  • Cross-platform styling: Integrates Tailwind v4 with NativeWind v5 and react-native-css so the same utility classes apply across mobile and web.
  • Build and tooling configuration: Shows how to add a withNativewind Metro transformer, a PostCSS plugin, and global CSS imports instead of legacy Babel presets.
  • Component wrappers and theming: Provides reusable CSS-wrapped components, image handling, and custom theme variables for semantic colors and fonts, useful for apps targeting Expo Router and animated UI.

Quick Start

Install the listed dependencies, add the Metro and PostCSS configuration, create a global.css with Tailwind imports and theme variables, and import that CSS into your app entry to enable Tailwind v4 styling across platforms.

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 v4 in an Expo project?▼

To set up Tailwind CSS v4 in an Expo project, install nativewind preview, react-native-css, and @tailwindcss/postcss, then add a withNativewind Metro transformer and import a global.css file into your app entry.

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

Yes, NativeWind v5 integrates with Tailwind CSS v4 in React Native by using a CSS-first workflow with react-native-css, enabling unified class-based styling and CSS theme variables across iOS, Android, and web.

Do I need to remove NativeWind babel presets for Tailwind v4?▼

Yes, you need to remove NativeWind babel presets when configuring Tailwind v4. The new setup replaces legacy Babel presets with a PostCSS plugin, a Metro transformer, and global CSS imports.

What is the best way to share styling between Expo web and mobile apps?▼

The best way to share styling across Expo web and mobile apps is using NativeWind v5 and react-native-css. This approach applies the same utility classes and CSS theme variables consistently across iOS, Android, and web.

Why are my Tailwind styles not working in Expo Router?▼

Tailwind styles may not work in Expo Router if you are missing the withNativewind Metro transformer, lack the global.css import in your app entry, or still have legacy NativeWind babel presets active.

Related Skills

Explore More Software Engineering Skills→
sofia-municipalitysofia-municipality
9

expo-tailwind-setup

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

Official
Advanced
svssdevasvssdeva
1

expo-tailwind-setup

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

Community
Intermediate
AsylcreekAsylcreek

expo-tailwind-setup

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

Community
Advanced
msichtermanmsichterman

expo-tailwind-setup

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

Community
Intermediate