Expo SDK 55 に NativeWind v5（Tailwind CSS v4）を導入する

Posted at 2026-03-22

はじめに

React Native で Tailwind CSS を使うためのライブラリ「NativeWind」の v5 が preview リリースされました。v5 は Tailwind CSS v4 ベースに刷新されており、設定がシンプルになっています。

この記事では、Expo SDK 55 のプロジェクトに NativeWind v5 をゼロから導入する手順を解説します。

前提

Expo SDK 55 プロジェクトが作成済み
Node.js 20 以上

# まだプロジェクトがなければ
npx create-expo-app@latest my-app --template blank
cd my-app

Step 1: パッケージのインストール

# NativeWind v5 本体と依存パッケージ
npx expo install nativewind@preview react-native-css react-native-reanimated react-native-safe-area-context

# Tailwind CSS v4 + PostCSS（開発依存）
npx expo install --dev tailwindcss @tailwindcss/postcss postcss

Step 2: `postcss.config.mjs` を作成

プロジェクトルートに作成します。

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

Step 3: `global.css` を作成

プロジェクトルートに作成します。

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

@import "nativewind/theme";

カスタムカラーを使いたい場合は @theme を追加：

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

@import "nativewind/theme";

@theme {
  --color-primary: #0095F6;
  --color-primary-foreground: #FFFFFF;
  --color-foreground: #0F172A;
  --color-background: #FFFFFF;
  --color-muted: #F1F5F9;
  --color-muted-foreground: #64748B;
  --color-destructive: #ED4956;
  --color-border: #DBDBDB;
}

--color-primary を定義すると bg-primary、text-primary、border-primary が使えるようになります。

Step 4: `metro.config.js` を設定

npx expo customize metro.config.js

内容を以下に置き換えます：

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

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config);

Step 5: `global.css` をインポート

エントリーポイント（App.js や app/_layout.tsx）の先頭でインポートします。

// App.js or app/_layout.tsx
import "./global.css";

export default function App() {
  // ...
}

Step 6: `package.json` に `lightningcss` の override を追加

ビルドエラーを防ぐため、lightningcss のバージョンを固定します。

{
  "overrides": {
    "lightningcss": "1.30.1"
  }
}

yarn の場合は "resolutions" を使ってください。

Step 7: クリーンインストール

rm package-lock.json
npm install

Step 8: TypeScript 設定（任意）

nativewind-env.d.ts をプロジェクトルートに作成します。

/// <reference types="react-native-css/types" />

tsconfig.json の include に追加：

{
  "include": ["**/*.ts", "**/*.tsx", "nativewind-env.d.ts"]
}

動作確認

npx expo start --clear

テストコンポーネント：

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

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-background gap-4 px-6">
      <Text className="text-3xl font-bold text-foreground">Hello NativeWind v5</Text>

      <TextInput
        className="w-full border border-border rounded-lg px-4 py-3 text-foreground"
        placeholder="メールアドレス"
        placeholderTextColor="#64748B"
      />

      <Pressable className="w-full bg-primary rounded-lg py-4">
        <Text className="text-primary-foreground text-center font-semibold text-base">
          ログイン
        </Text>
      </Pressable>

      <Pressable className="w-full bg-destructive rounded-lg py-4">
        <Text className="text-white text-center font-semibold">削除</Text>
      </Pressable>
    </View>
  );
}

text-primary-foreground（白文字）が青いボタン上に表示されれば成功です。

ファイル構成まとめ

my-app/
├── global.css              ← Tailwind ディレクティブ + @theme
├── postcss.config.mjs      ← @tailwindcss/postcss
├── metro.config.js         ← withNativeWind
├── babel.config.js         ← babel-preset-expo のみ
├── nativewind-env.d.ts     ← TypeScript 型定義
├── package.json            ← overrides: lightningcss
├── app/
│   └── _layout.tsx         ← import "./global.css"
└── ...

v4 との違い

項目	v4	v5
Tailwind CSS	v3	v4
設定ファイル	`tailwind.config.js` (JS)	`global.css` 内 `@theme` (CSS)
PostCSS	不要	`postcss.config.mjs` 必要
Babel	`jsxImportSource: 'nativewind'` + `nativewind/babel` 必要	不要
Metro	`withNativeWind(config, { input: './global.css' })`	`withNativeWind(config)`
型定義	`nativewind/types`	`react-native-css/types`
CSS エンジン	`react-native-css-interop`	`react-native-css`

トラブルシューティング

スタイルが反映されない

npx expo start --clear

Metro キャッシュをクリアして再起動。

`lightningcss` のエラー

package.json の overrides を確認し、rm package-lock.json && npm install を再実行。

`@theme` のカラーが効かない

global.css の import 順序を確認。@import "nativewind/theme" の後に @theme を書く。

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up