NativeWind再考

https://www.nativewind.dev/quick-starts/expo

このライブラリの前身は、設定で躓いたが、やはりできることなら利用したい。

ということで、再度試してみることとした。

Expoでやってます。

上記HPを参考にするとうまくいきました。

 

npx create-expo-app Sample

(ここでは、Sampleがプロジェクト名)

プロジェクト名に移動して、

yarn add nativewind

その次に、yarn add -dev tailwindcss としたがうまくいかず

npx expo install tailwindcss としたら、入るのですが、エラーが出ました。

そこで下記HPにもとづいて

npx expo install tailwindcss@3.3.2とするとうまくいきました。

https://stackoverflow.com/questions/76688256/getting-error-use-processcss-thencb-to-work-with-async-plugins

npx tailwindcss initとすると、

tailwind.config.jsというファイルが作られます。

最上記HPどおり変更します。

babel.config.jsも最上記HPどおり変更します。

ちなみに、それぞれのライブラリのバージョンは以下の通りです。

  "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "tailwindcss": "3.3.2"

 

 

これができるようになると、

React.jsでのデザインをとってきて枠組みだけは利用できるようになるので、かなりはかどります。