expo-tailwind-setup

Files (1)

• SKILL.md

SKILL.md (first lines)

# Tailwind CSS v4 + NativeWind v5 for Expo

## Overview

NativeWind v5 brings Tailwind CSS v4 to React Native, enabling a single styling system across iOS, Android, and web. It compiles Tailwind classes into React Native compatible styles at build time using `react-native-css`.

**Core principle:** Write Tailwind classes once, render natively on all platforms. NativeWind translates CSS concepts into React Native's styling system, not a webview.

## When to Use

- Starting a new Expo/React Native project and want utility-first styling
- Porting a web app with Tailwind to React Native
- Building a universal app (iOS + Android + Web) with shared styling
- Wanting dark mode, responsive design, or theme variables without manual StyleSheet management

## Installation

### New Project

```bash
npx create-expo-app@latest my-app
cd my-app
npx expo install nativewind tailwindcss react-native-css
```

### Existing Project

```bash
npx expo install nativewind tailwindcss react-native-css
```

### Configuration

Create `global.css` in your project root:

```css
/* global.css */
@import "tailwindcss";
```

Add the CSS import to your root layout:

```tsx
// app/_layout.tsx
import "../global.css";

import { Stack } from "expo-router";

export default function RootLayout() {
  return <Stack />;
}
```

Update `metro.config.js`:

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

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, {
  input: "./global.css",
});
```

Add the babel preset (if not using the new React compiler):

```js
// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
    ],
  };
};
```

For TypeScript, create or update `nativewind-env.d.ts`:

```ts
/// <reference types="nativewind/types" />
```

## Basic Usage

```tsx
import { View, Text, Pressable } from "react-native";

export default function HomeScreen() {
  return (
    <View className="flex-1 items-center justify-center bg-white dark:bg-gray-900">
      <Text className="text-2xl font-bold text-gray-900 dark:text-white">
        Hello NativeWind
      </Text>
      <Pressable className="mt-4 rounded-lg bg-blue-500 px-6 py-3 active:bg-blue-600">
        <Text className="text-base font-semibold text-white">
          Press Me
        </Text>
      </Pressable>
    </View>
  );
}
```

## CSS-First Theming

Tailwind CSS v4 uses CSS custom properties for theming. Define your design tokens in `global.css`:

```css
/* global.css */
@import "tailwindcss";

@theme {
  /* Colors */
  --color-primary: #3b82f6;

From bidah/react-native-hifi, MIT.

More from bidah/react-native-hifi