skills.rest
nawab69
nawab69COMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-tailwind-setup

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

Updated Feb 27, 2026
Search Tags:#styling#tailwind#react-native#expo#nativewind#postcss
One-click install
npx skills add https://github.com/nawab69/pouch-monorepo --skill expo-tailwind-setup-nawab69
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/nawab69/pouch-monorepo/tree/main/apps/mobile/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/nawab69/pouch-monorepo --skill expo-tailwind-setup-nawab69

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide removes the friction of enabling Tailwind CSS v4 styling across Expo projects by providing a CSS-first configuration that works on iOS, Android, and web without relying on legacy Babel presets.

Core Features & Use Cases

  • Cross-platform styling: Configure Tailwind v4 with NativeWind v5 and react-native-css so the same utility classes work on mobile and web.
  • Build and transformer setup: Instructions to update metro.config.js, add a PostCSS plugin, and create a global CSS with @theme variables to register custom tokens and platform colors.
  • Component wrappers and runtime hooks: Provides reusable CSS-wrapped React Native components and a useCSSVariable hook for integrating CSS variables in JS.
  • Use Case: Ideal for Expo apps that need a single styling system for iOS, Android, and web while leveraging Tailwind conventions and native platform colors.

Quick Start

Install the Tailwind v4 and NativeWind packages, add the PostCSS plugin, import the provided global CSS into your app entry, and wrap components with useCssElement to enable className-based 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 v4 in an Expo project?▼

Setting up Tailwind CSS v4 in Expo requires updating metro.config.js, adding a postcss.config.mjs plugin, creating a global CSS file with @theme variables, and wrapping React Native components with useCssElement.

Does NativeWind v5 work with Tailwind CSS v4 across iOS, Android, and web?▼

Yes, NativeWind v5 works with Tailwind CSS v4 across iOS, Android, and web by utilizing react-native-css for runtime CSS support, enabling consistent cross-platform styling without relying on legacy Babel presets.

What is the best way to migrate from Babel-based NativeWind presets in Expo?▼

The best way to migrate from Babel-based NativeWind presets is to adopt a CSS-first configuration using NativeWind v5 and react-native-css, which involves updating your PostCSS and Metro configurations to support runtime CSS.

Why do I need a postcss.config.mjs plugin for Expo Tailwind styling?▼

You need a postcss.config.mjs plugin to process Tailwind CSS v4 utility classes and enable the CSS-first configuration that NativeWind v5 and react-native-css use to apply runtime styling across native platforms.

Can I use CSS variables in my React Native components with this Tailwind setup?▼

Yes, you can use CSS variables in your React Native components by utilizing the provided useCSSVariable hook and wrapping your elements with useCssElement to enable className and CSS variable support.

Related Skills

Explore More Software Engineering Skills→
yurkennyurkenn
1

tailwind-setup

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

Community
Intermediate
svssdevasvssdeva
1

expo-tailwind-setup

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

Community
Intermediate
thejordanleopoldthejordanleopold
4

expo-tailwind

Configure Tailwind CSS with Expo and React Native using NativeWind v5.

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