NativeWindでTailwind CSSをReact Nativeに導入する

Tailwind CSSでWebアプリを構築したことがある方なら、React NativeのStyleSheet APIに切り替えると、一歩後退したような感覚を覚えるでしょう。ユーティリティファーストのワークフロー、馴染みのあるクラス名、そしてスピード感が失われてしまいます。NativeWindは、ブラウザやCSSエンジンを必要とせずに、TailwindスタイルのスタイリングをReact Nativeにもたらすことで、このギャップを埋めます。

本記事では、NativeWindの仕組み、現在の安定版が提供する機能、そして実際の制約について解説します。

NativeWindが実際に行うこと

React NativeにはCSSエンジンがありません。すべてのスタイルは、styleプロップに渡されるJavaScriptオブジェクトである必要があります。NativeWindは、コードとその要件の間に位置します。Tailwind構文を使用してclassName文字列を記述すると、NativeWindがそれらのスタイルをReact Native用にコンパイルして適用します。これは、ビルド時の処理と条件付きスタイリングのための軽量ランタイムレイヤーを組み合わせたものです。

結果は次のようになります:

<View className="flex-1 items-center justify-center bg-blue-500">
  <Text className="text-white text-lg font-bold">Hello</Text>
</View>

これはTailwind CSSがネイティブで実行されているわけではありません。NativeWindがTailwindのクラス語彙を解釈し、React Nativeが理解できるスタイルにマッピングしているのです。この違いは、限界に達したときに重要になります。

NativeWind v4: 安定した本番環境パス

2026年初頭の時点で、NativeWind v4が本番環境対応バージョンです。これはTailwind CSS v3を対象としており、v4ではありません。Tailwind v4に対応したv5プレビュー版は存在しますが、まだデフォルトのパスではありません。新しいプロジェクトを開始する場合は、tailwindcss@^3.4でNativeWind v4を使用してください。

NativeWind v4は、Babel統合を維持しながら、jsxImportSourceトランスフォームを中心に構築された、より予測可能なアーキテクチャを導入しました。実際には、これは次のことを意味します:

• classNameプロップはコンポーネント上で保持され、ビルド時に削除されません
• clsxやcnなどのユーティリティをclassNameで直接使用できます
• Metroやその他のツールでのセットアップがより一貫性を持ちます

NativeWind v4は、React Nativeの組み込みバージョンを拡張する独自のStyleSheetインポートも導入しました。これにより、styleとclassNameプロップをクリーンにマージできます。これは、デフォルトのStyleSheetがトランスフォームやシャドウで苦労する部分です。

ExpoでのNativeWindセットアップ

ExpoはNativeWindの最も一般的な環境であり、最もスムーズなセットアップ体験を提供します。大まかな手順は次のとおりです:

1. nativewind、react-native-reanimated、react-native-safe-area-context、およびtailwindcss@^3.4を依存関係としてインストールします
2. npx tailwindcss initを実行し、Tailwind設定にnativewind/presetを追加します
3. 標準のTailwindディレクティブ(@tailwind base;、@tailwind components;、@tailwind utilities;)を含むglobal.cssを作成し、アプリのエントリーポイントでインポートします
4. babel.config.jsをjsxImportSource: "nativewind"で設定し、NativeWind Babelプラグインを含めます
5. Metro設定をwithNativeWindでラップします

TypeScriptプロジェクトの場合、/// <reference types="nativewind/types" />を含むnativewind-env.d.tsファイルを追加して、ネイティブコンポーネントで適切なclassNameプロップサポートを取得します。

設定を完全にスキップしたい場合は、npx rn-new --nativewindで、NativeWindがすでに配線された最小限のExpoプロジェクトを生成できます。

ダークモード、バリアント、および実際の制限

NativeWind v4は、colorScheme、setColorScheme、toggleColorSchemeを返すuseColorSchemeフックを通じてdark:バリアントをサポートしています。ダークモードスタイルは、Web上と全く同じように適用できます:

<Text className="text-gray-900 dark:text-white">Label</Text>

グループバリアントも機能します。className="group"を持つPressableは、group-active:やgroup-hover:を介して子スタイルを駆動できます。

WebのTailwindとの相違点:

• ブレークポイントはモバイル画面にきれいにマッピングされません。 Tailwindのsm:、md:、lg:プレフィックスは、デバイスのフォームファクターではなく、ビューポート幅向けに設計されています。レスポンシブなモバイルレイアウトの場合、代わりにReact NativeのDimensions APIやuseWindowDimensionsフックを使用することが多くなります。
• 一部のスタイルプロップには代替APIが必要です。 たとえば、columnWrapperStyleのようなリスト固有のスタイリングは、コンポーネントによってはclassNameの外で処理される場合があります。
• シャドウはネイティブでは異なる動作をします。 React Nativeは、プラットフォーム固有のシャドウプロパティ(iOSではshadowColor、shadowOffset、shadowOpacity、shadowRadius、Androidではelevation)を使用するため、結果はCSSのbox-shadowと同等ではありません。
• ユーティリティクラスによるアニメーションは実験的であり、iOSとAndroid間で一貫性がありません。複雑なものについては、React Native Reanimatedを直接使用してください。

結論

NativeWindは変換レイヤーであり、CSSランタイムではありません。React Nativeのコンテキストで、Tailwindの語彙とワークフローを提供します。これは本当に有用です。特に、すでにTailwindに精通しているチームにとっては。しかし、プラットフォームの境界を消すわけではありません。時折styleプロップを記述し、ネイティブ固有の制約を回避し、React Nativeのレイアウトモデルで考える必要があります。

Tailwindに精通しているほとんどの開発者にとって、このトレードオフは価値があります。React Nativeでのユーティリティファーストスタイリングによる生産性の向上は本物であり、NativeWind v4は本番環境で出荷できるほど安定しています。

よくある質問

Expo以外のベアReact NativeプロジェクトでもNativeWindを使用できますか?

はい、NativeWindはベアReact Nativeプロジェクトでも動作します。セットアップには、withNativeWindラッパーを使用してMetroバンドラーを手動で設定し、Babel設定にjsxImportSource設定が含まれていることを確認する必要があります。Expoはこのプロセスを簡素化しますが、必須要件ではありません。ベアプロジェクトでは、ネイティブモジュールのリンクを自分で処理する必要があります。

NativeWindはカスタムTailwindテーマとプラグインをサポートしていますか?

NativeWind v4は、カスタムカラー、スペーシング、フォント、ブレークポイントを含む、tailwind.config.jsで定義されたカスタムテーマをサポートしています。ユーティリティクラスを生成する標準的なTailwindプラグインのほとんどは期待どおりに動作します。ただし、疑似要素やCSS Gridなどのブラウザ固有のCSS機能に依存するプラグインは、React Nativeスタイルに変換されない場合があります。

NativeWindはiOSとAndroidのプラットフォーム固有のスタイルをどのように処理しますか?

NativeWindは、実行中のプラットフォームに基づいて条件付きでスタイルを適用できるios:やandroid:などのプラットフォームバリアントを提供します。たとえば、各プラットフォームを個別にターゲットにするために、ios:shadow-lg android:elevation-4でclassNameを記述できます。これは、React Native開発者がPlatform APIを使用してプラットフォームの違いを処理する方法を反映しています。

プレーンなStyleSheetと比較して、NativeWindを使用した場合のパフォーマンスへの影響はどうですか?

NativeWindは、ビルド時のコンパイルとランタイムスタイル解決の組み合わせを使用します。スタイリングの多くは最適化およびキャッシュされますが、条件付きおよび動的クラスを処理するためのランタイムオーバーヘッドがまだあります。ほとんどのアプリケーションでは、パフォーマンスの差はわずかですが、純粋なゼロコストのコンパイル時変換ではありません。開発中のホットリロードパフォーマンスは、追加の処理ステップのためにわずかに遅くなる場合があります。