Tailwind CSSを入れる際にエラー

Tailwind CSSの設定は環境に応じて適宜行う必要があり、下記に手順が載ってます。

https://tailwindcss.com/docs/installation

Reactで使用すると、Tailwindの動作に必要なPostCSSを上書きができないため、CRACO（Create React App Configuration Override）というものを使用するとのこと。

CRACOのインストール

npm install @craco/craco

でインストールできるはず・・・なのにエラーが・・・

npm ERR! code ERESOLVE

npm ERR! ERESOLVE unable to resolve dependency tree

npm ERR!

npm ERR! While resolving: my-app@0.1.0

npm ERR! Found: react-scripts@5.0.1

npm ERR! node_modules/react-scripts

npm ERR! react-scripts@”5.0.1″ from the root project

npm ERR!

npm ERR! Could not resolve dependency:

npm ERR! peer react-scripts@”^4.0.0″ from @craco/craco@6.4.5

npm ERR! node_modules/@craco/craco

npm ERR! @craco/craco@”*” from the root project

npm ERR!

npm ERR! Fix the upstream dependency conflict, or retry

npm ERR! this command with –force, or –legacy-peer-deps

npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

npm ERR!

npm ERR! See /Users/ユーザー名/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/ユーザー名/.npm/_logs/2022-11-04T09_26_43_902Z-debug-0.log

どうやらReactの最新プロジェクトに対応していないのが問題とのこと。

解決方法

npm install --save --legacy-peer-deps @craco/craco

上記のようにオプションを使うことで半強制的にインストールできるようになるそう。

ただし、解決としては弱そう・・・

さいごに

今回Reactの勉強のために書籍通りに作業していたところエラーが・・・

アップデートによっては使えないとかどの言語でもあるのだなーと思いつつ・・・

評判だったので下記の書籍を読んでいますが、するする読めるのでReactを始めるにはおすすめ。