ReactNativeにTailwindを導入

はじめに

ReactNative に Tailwind を導入したので、備忘録として記事を書きます。
ドキュメントでは、どこにファイルを作るのかとなど少し分かりにくい点があったため、その辺りで詰まらないよう記事を書きたいと思います。
実際に導入するパッケージとしては、NativeWind になります。

NativeWindの導入

こちらのNeitiveWindドキュメントを参考に ReactNative プロジェクトにパッケージをインストールしていきます。

ReactNative プロジェクトの作成がまだの場合は、以下のコマンドを実行して作成します。

npm uninstall -g react-native-cli @react-native-community/cli    // 予期しないエラーを防ぐため削除
npx @react-native-community/cli@latest init NativeWindProject    // NativeWindProjectを作成

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

ReactNative プロジェクトに npm パッケージと pod パッケージをインストールします。

nativewind パッケージのインストールに合わせて、依存するパッケージもインストールします。

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context    // npm パッケージをインストール

npm パッケージがインストールできたら、以下のコマンドを実行し、pod パッケージをインストールします。
うまくいかない場合は、ios ディレクトリへ移動し、`bundle exec pod install` を実行します。

npx pod-install    // pod install を実行し、pod パッケージをインストール

// 失敗する場合は、iosディレクトリで bundle exec pod install を実行
// cd ios                     // iosディレクトリへ移動
// bundle exec pod install    // bundlerのcocoapodsでpodパッケージをインストール

2. Tailwindの設定

以下のコマンドを実行し、tailwind.config.js ファイルを作成します。

cd NativeWindProject    // ReactNativeプロジェクトへ移動
npx tailwindcss init    // tailwind.config.js ファイルを作成

作成された tailwind.config.js ファイルを以下のように修正します。
content には、tailwind を使用するコンテンツファイルのパスを指定します。
presets には、nativewind/preset を指定し、nativewind に必要な設定を読み込むようにします。

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app/**/*.{js,jsx,ts,tsx}', './*.{js,jsx,ts,tsx}'], // App.tsx に適用するため、'./*.{js,jsx,ts,tsx}' を追記
  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
}

次に、global.css ファイルを作成し、以下のように設定します。
global.css を作成する場所はどこでもいいのですが、既存のプロジェクトに src/assets/styles フォルダなどがあれば、その配下にファイルを作成します。

// global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

参考：https://tailwindcss.com/docs/configuration

3. Babelの設定

babel.config.js を以下のように修正します。
Expo フレームワークを使用している場合、別の設定が必要になるので、こちらをご確認ください。

// babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
}

4. Metroの設定

metro.config.js を以下のように修正します。
Expo フレームワークを使用している場合、別の設定が必要になるので、こちらをご確認ください。

// metro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
const { withNativeWind } = require('nativewind/metro')

const config = mergeConfig(getDefaultConfig(__dirname), {
  /* your config */
})

module.exports = withNativeWind(config, { input: './global.css' }) // 作成したglobal.cssのパスを指定

5. CSSの読み込み

App.tsx で global.css を読み込みます。

// App.tsx

import "./global.css"    // 作成したglobal.cssのパスを指定

export default App() {
  /* Your App */
}

6. TypeScriptの設定

nativewind-env.d.ts ファイルを作成し、nativewind の型定義ファイルをプロジェクトに読み込みます。
こうすることにより、コンポーネントの props で className が補完されるようになります。

VSCode で className に入力する文字列（Tailwind CSS）を補完するには、Tailwind CSS IntelliSense の拡張機能をインストールします。
拡張機能をインストールすることで、Tailwind CSS の文字列が保管されるようになります。

// nativewind-env.d.ts
// プロジェクトのルートディレクトに作成

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

動作確認

App.tsx で適当なコンポーネントを返すよう実装し、問題なくスタイルが適用されていることを確認します。

// App.tsx

function App(): React.JSX.Element {
  return (
    <SafeAreaView className='bg-orange-300'>
      <Text>Hello World !</Text>
    </SafeAreaView>
  );
}

export default App;

おわりに

今回、ReactNative での Tailwind 導入について記事を書きました。
この記事が、未来の自分や他の方のお役に立てば幸いです。
ここまで、ご覧いただきありがとうございました。