agents: Skill for Claude Code

Tailwind CSS Setup for Expo with react-native-css

This guide covers setting up Tailwind CSS in Expo using react-native-css and NativeWind for universal styling across iOS, Android, and Web. Always install @latest versions — see universal/version-policy.md.

Overview

This setup uses:

• Tailwind CSS - Modern CSS-first configuration
• react-native-css - CSS runtime for React Native
• NativeWind - Metro transformer for Tailwind in React Native
• @tailwindcss/postcss - PostCSS plugin for Tailwind

Installation

Note: NativeWind is in preview. The versions below were correct at time of writing but may be outdated. Before installing, check the latest versions at https://www.nativewind.dev/getting-started/installation

# Install dependencies — check NativeWind docs for latest compatible versions
npx expo install tailwindcss@latest nativewind@latest react-native-css@latest @tailwindcss/postcss@latest tailwind-merge clsx

Add resolutions for lightningcss compatibility (check NativeWind docs for current version):

// package.json
{
  "resolutions": {
    "lightningcss": "1.30.1"
  }
}

• autoprefixer is not needed in Expo because of lightningcss
• postcss is included in expo by default

Configuration Files

Metro Config

Create or update metro.config.js:

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = withNativewind(config, {
  // inline variables break PlatformColor in CSS variables
  inlineVariables: false,
  // We add className support manually
  globalClassNamePolyfill: false,
});

PostCSS Config

Create postcss.config.mjs:

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Global CSS

Create src/global.css:

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

/* Platform-specific font families */
@media android {
  :root {
    --font-mono: monospace;
    --font-rounded: normal;
    --font-serif: serif;
    --font-sans: normal;
  }
}

@media ios {
  :root {
    --font-mono: ui-monospace;
    --font-serif: ui-serif;
    --font-sans: system-ui;
    --font-rounded: ui-rounded;
  }
}