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