React NativeでTailwind CSSを使う(tailwind-rn@4.0.0以降)

はじめに

React NativeでTailwindを使いたい。
そう思った私は、技術記事を漁り、tailwind-rnというライブラリを発見し、導入のためにスクリプトを打ちました。

❯ npx create-tailwind-rn                                                                                                                                   ─╯
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/create-tailwind-rn - Not found
npm ERR! 404
npm ERR! 404  'create-tailwind-rn@latest' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

しかし、エラーが。公式のリポジトリ漁るか。
すると、2022年1月末にセットアップ方法が変わっているじゃありませんか(執筆時2022年4月上旬)。
ネットに記事が落ちていないので、後世の方々へ導入方法を書き残しておこうと思い執筆しました。

目次

1. 環境情報
2. やること/やらないこと
3. tailwind-rnの導入
4. 初期設定
5. 動作確認

1. 環境情報

• `expo: "~44.0.0"
• "react": "17.0.1"
• "react-native": "0.64.3"
• "typescript": "~4.3.5"
• "tailwind-rn": "^4.2.0"

2. やること/やらないこと

• やること

  • tailwind-rnの導入方法
  • tailwind-rnの使用法の初歩(動作確認程度)

• やらないこと

  • Tailwindの設定方法
  • Tailwindの使い方
  • React Native, Expoの導入方法

3. tailwind-rnの導入

はじめにで書きましたが、npx create-tailwind-rnはver4.0.0以前のものです。
ver4.0.0以降は、よくライブラリ導入で使うであろうyarn add tailwind-rnすら不要です。

npx setup-tailwind-rn

このコマンド一つで、tailwind-rnのインストールから、依存関係のインストール、設定ファイルの作成までやってくれます。
コマンドを叩いたあとで以下のような表示が出たら成功です。

❯ npx setup-tailwind-rn                                                                                                                                    ─╯
Need to install the following packages:
  setup-tailwind-rn
Ok to proceed? (y) y

  ✔ Install dependencies
  ✔ Create Tailwind config
  ✔ Add scripts

  ★ Summary

  New scripts in package.json:

   build:tailwind - Build CSS file and transform it for use with tailwind-rn
   dev:tailwind - Watch mode for the command above

  New files:

   tailwind.config.js - Tailwind configuration
   input.css - Entrypoint for Tailwind compiler
   tailwind.css - Generated CSS by Tailwind compiler
   tailwind.json - Generated CSS converted into JSON for `tailwind-rn`

  ↓ What's next?

  1. Run tailwind-rn in development mode:

   $ yarn dev:tailwind

  2. Import TailwindProvider and tailwind.json in the root of your app

   import {TailwindProvider} from 'tailwind-rn';
   import utilities from './tailwind.json';

  3. Wrap the root of your app into TailwindProvider:

   <TailwindProvider utilities={utilities}>
     <MyComponent/>
   </TailwindProvider>

  4. Use Tailwind

   import {useTailwind} from 'tailwind-rn';

   const MyComponent = () => {
     const tailwind = useTailwind();

     return <Text style={tailwind('text-blue-600')}>Hello world</Text>;
   };

4. 初期設定

上記のログを見ていただけるとわかりますが、ほとんどのことは自動でやってくれているのでここからは確認作業になります。

• ライブラリのインストール確認
  npm ll | grep -e tailwind-rn -e tailwindcss -e postcss -e concurrentlyで必要なライブラリがインストールされているか確認しましょう。

• tailwind.config.jsの確認
  tailwind.config.jsとは、テーマなどをカスタマイズする際にそれを定義するファイルになります。
  今回はtailwind-rnの導入の話がメインなのでこちらの設定ファイルの説明はしません。tailwind-rnの使用には以下の2つがあれば最低限問題はありません。

tailwind.config.js

module.exports = {
+    content : ['./src/**/*.{js,jsx,ts,tsx}'] // デフォルトは空なので、任意のパスを書き足してください
  ...
+    corePlugins: require('tailwind-rn/unsupported-core-plugins') // こちらはセットアップスクリプトに自動で書き足されています
};

• package.jsonの確認
  セットアップスクリプトによって、以下の2つのnpmスクリプトが追加されていることを確認します。
  package.json

  {
    "scripts":
     {
  +		"build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
  +		"dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
     }
  }
  

5. 動作確認

上記の確認が終われば動作確認をしましょう。

1. App.tsxにTailwindProviderを追加します。

   App.tsx

   import {TailwindProvider} from 'tailwind-rn';
   import utilities from './tailwind.json';
   
   const App = () => (
     <TailwindProvider utilities={utilities}>
       <MyComponent />
     </TailwindProvider>
   );
   
   export default App;
   

2. useTailwindをインポートします。

   Test.tsx

   import {useTailwind} from 'tailwind-rn';
   
   const MyComponent = () => {
     const tailwind = useTailwind();
   
     return <Text style={tailwind('text-blue-600')}>Hello world</Text>;
   };
   

3. npm run dev:tailwindを打って、cssファイルを生成します。

• tailwind.css
Tailwindで作られたCSSで、アプリ内で使用されたスタイルがスクリプトによって書きこまれます。

• tailwind.json
  上記のtailwind.cssをtailwind-rn用にjsonファイルに変換したものです。

終わりに

かなり簡単ではありましたが、tailwind-rnの導入方法について書かせていただきました。

新しいライブラリを導入するときなどは日本語の記事で楽をしたくなりますが、英語のめんどくささを考慮しても公式ドキュメントの情報の正確さには敵わないなと痛感した導入録となりました。

少しでもこの記事が皆様の開発の役に立てれば幸いです。
お読みいただきありがとうございました。