expo + react nativeで tailwindcssの設定をする手順

今年から使用可能になったvercelが提供しているUI生成ツールv0を使って簡単におしゃれなUIを実装できるようになりました。

それに伴って、cssもできればtailwindで実装したいという方が増えるのかなと思いこの記事を残します。

環境構築の流れ

1. Expoのインストール
2. プロジェクトの作成
3. NativeWindのインストールと設定
4. TailwindCSSの設定
5. 動作確認

それじゃあ、順番に進めていきますよ！

1. Expoのインストール

まずはExpoをインストールしていきます。ターミナルを開いて、以下のコマンドを実行してください。

npm install -g expo-cli

2. プロジェクトの作成

### 作成するプロジェクトへ遷移して
npx create-expo-app [プロジェクト名]

3. NativeWindとtailwindのインストールと設定

nativewindとtailwindをinstallします

npm install nativewind
npm install --save-dev tailwindcss

installが完了したら、bubelでnailwindの面倒な処理をやってもらうようにします

# babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
  };
};

これをすることにより

babel.config.jsにpluginを入れなかった場合

import { style } from 'nativewind'

const StyledText = style(Text);

const App = () => {
   return (
     <StyledText className="text-red-300"> Hellow </StyledText>
   )
}

babel.config.jsにpluginを入れた場合

const App = () => {
   return (
     <Text className="text-red-300"> Hellow </StyledText>
   )
}

のようになstyleをわざわざ書かなくて済むようになります。

4. TailwindCSSの設定

TailwindCSSの設定ファイルを作成しましょう。以下のコマンドを実行します。

npx tailwindcss init

作成されたtailwind.config.jsファイルを開いて、以下のように編集します。

javascriptCopymodule.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

TypeScriptを使っている人は、tsconfig.jsonファイルに以下の設定を追加してください。
↓react-native(expo)はデフォルトでclassNameをサポートしていないので、追加しないと型エラーになる

  "compilerOptions": {
    "types": ["nativewind/types"]
  }

5. 動作確認

ここまでくれば、もう終わりです！実際に動かして確認してみましょう。
App.js（またはApp.tsx）ファイルを開いて、以下のように編集します。

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-slate-100">
      <Text className="text-2xl font-bold text-slate-800">
        TailwindCSSが動いてるよ！
      </Text>
    </View>
  );
}

おわり

できるだけ簡潔に必要な情報を届けられるよう、文字数は最小限にしています。
誰かの力になれれば嬉しいです