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は本番環境で出荷できるほど安定しています。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.