nativewind

NativeWind

概要

NativeWind 4.x は Tailwind CSS 3.x を React Native に橋渡しし、View、Text、Pressable、ScrollView などの RN コンポーネントで className プロパティを使用できるようにします。使い慣れた Tailwind ユーティリティクラスをネイティブにレンダリングします。

インストール：pnpm add nativewind tailwindcss@3 と Babel／Metro の設定

ワークフロー

初期設定：

1. インストール：pnpm add nativewind tailwindcss@3
2. app/、components/ などを指すコンテンツパスを指定して tailwind.config.js を作成します。
3. @tailwind base; @tailwind components; @tailwind utilities; を記述した global.css を作成します。
4. babel.config.js を更新し、nativewind/babel プリセットを追加します。
5. metro.config.js を更新し、withNativeWind でラップします。
6. /// <reference types="nativewind/types" /> を記述した nativewind-env.d.ts を作成します。
7. ルートの _layout.tsx で global.css をインポートします。

コンポーネントのスタイル設定：

1. RN コンポーネント（View、Text、Pressable など）をインポートします。
2. Tailwind ユーティリティを指定した className プロパティを適用します。
3. ScrollView／FlashList の内部スタイル設定には contentContainerClassName を使用します。
4. デバイス／シミュレーターでテストし、レンダリングを確認します。

ガイダンス

設定ファイル

3 つの設定ファイルが必要です。

babel.config.js：NativeWind プリセットを追加します

presets: ['babel-preset-expo', 'nativewind/babel']

metro.config.js：Metro の設定を NativeWind でラップします

withNativeWind(config, { input: './global.css' })

tailwind.config.js：RN のコンテンツパスを指定した標準的な Tailwind 3.x の設定です

content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}']

className プロパティ

NativeWind はすべての RN コアコンポーネントで className を使えるようにします。

• <View className="flex-1 bg-white p-4">
• <Text className="text-lg font-bold text-gray-900">
• <Pressable className="bg-blue-500 rounded-lg p-3">
• <ScrollView className="flex-1" contentContainerClassName="p-4 gap-3">

Web 版 Tailwind との主な違い

Web 版 Tailwind	NativeWind（RN）	備考
hover:bg-gray-100	使用不可	タッチデバイスにはホバーがありません
cursor-pointer	該当なし	代わりに Pressable を使用します
flex（デフォルトは行）	flex（デフォルトは列）	RN のフレックスボックスは列がデフォルトです
そのままの文字列	<Text> で囲む必要があります	RN では Text コンポーネントが必要です
div	View	HTML 要素はありません
gap-4	gap-4	NativeWind 4.x でサポートされています
grid	使用不可	代わりにフレックスレイアウトを使用します

条件付きクラス

クラス文字列を条件に応じて連結します。

className={`px-4 py-2 rounded-lg ${isActive ? 'bg-blue-500' : 'bg-gray-200'}`}

または、条件分岐を簡潔にするために clsx／cn などのユーティリティを使用します。

ScrollView のスタイル設定

ScrollView には className の適用先が 2 つあります。

• className — 外側のコンテナーのスタイル設定
• contentContainerClassName — 内部コンテンツのスタイル設定（パディング、間隔、配置）

スクロールコンテンツのパディングや間隔には、必ず contentContainerClassName を使用します。

テーマのカスタマイズ

tailwind.config.js のテーマを通じて拡張します。

theme: {
  extend: {
    colors: { brand: { 50: '...', 500: '...', 900: '...' } },
    fontFamily: { sans: ['Inter'] }
  }
}

ベストプラクティス

• TypeScript で className の型をサポートするため、必ず nativewind-env.d.ts を作成します。
• ScrollView の内部の間隔には className ではなく contentContainerClassName を使用します。
• RN では flex のデフォルトが列であることを忘れず、必要に応じて明示的に flex-row を追加します。
• ルートの _layout.tsx の先頭で global.css をインポートします。
• Tailwind の間隔スケールを一貫して使用します（StyleSheet との混在は避けます）。
• スタイルの適用漏れを防ぐため、tailwind.config.js のコンテンツパスを正確に保ちます。
• 一貫した間隔を実現するため、兄弟要素間のマージンではなく gap-* を使用します。

アンチパターン

• 同じコンポーネントで StyleSheet.create() と className を併用する（どちらか一方を選びます）。
• hover: や cursor- ユーティリティを使用する（モバイルでは利用できません）。
• ScrollView で contentContainerClassName を指定しない（className ではパディングが機能しません）。
• grid ユーティリティを使用する（RN ではサポートされていません。フレックスレイアウトを使用します）。
• <Text> で囲まず、そのままの文字列を配置する（RN ではクラッシュします）。
• tailwind.config.js の content 配列にすべてのソースディレクトリを含めない。
• Tailwind CSS 4.x の構文を使用する（NativeWind には Tailwind 3.x が必要です）。