React NativeでTailwind CSSを使用したいので、nativewindを導入した

React NativeでTailwind CSSを使用したいということで調べてみると下記２つが該当した。 tailwind-rnとnativewindの比較 - tailwind-rn ☆4.1k - nativewind ☆3k スターはtailwind-rnが上回っているけど、活動の多さではnativewindが上回っているようなので、nativewindを採用した。 nativewindの導入 ドキュメントも丁寧なのでなぞって行っていく。 上記コマンドで該当パッケージをインストールする。 次に上記コマンドでtailwind.config.jsを作成し、下記のように記載する。 は自身のディレクトリに編集する。 次にbabel.config.jsを下記のように編集していく。 以上とのことなので、起動してみる。 無事に開発環境は動いている。 次にnativewindの記述を反映することができるか確認してみる。 を に変換した。結果大量のエラーが出現した。 エラーの解消 エラーを解消していく。 そもそもnativewindをexpoで使用するサンプルがGithubに用意されていたので、それを見つつ解消していく。 まず最初に変更したtailwind.config.jsを に変更する。 次に、babel.config.jsはそのまま。 で、ここまでで不足しているっぽいファイルを追加していく。 まずは、styles.cssをルートに追加する。 内容は あとnativewind.d.tsという型ファイル。 中身は これにの追加によりclassNameの型エラーが解消された。 最後にapp.tsxにimport "./styles.css";という感じで追加したstyle.cssをインポートする。 で、実行すると というエラーが出た。 https://github.com/marklawlor/nativewind/issues/556 も上がっている。 過去issueで解決済だったので、それを参照し tailwindのバージョンを"^3.3.2”に変更したところ、 このエラーは消えた。 次に、下記エラーと遭遇する。 このエラーはApp.tsxのimport "./styles.css";を削除したら消えた。 動作確認 最後に起動したところ、無事にnativewindの記述が反映されていることを確認できた。