参考にした記事
tailwind2.0 + react + typescript 環境構築
上記の記事通りすすめていったらいくつか躓いた点があったので記事にしました。
基本的な進め方は上記記事を参照してください。
tailwindのverが変わっておりそれに伴ってyarnスタート時にエラーが発生していました。
環境
OS:win10
$ node -v
v16.13.2
$ yarn -v
1.22.17
$ npx create-react-app --version
5.0.0
エラーその1
```:gitbash $ yarn start yarn run v1.22.17 $ craco start 'craco' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ```原因:すでにビルドしていたreactappがstartしたままの状態でtailwindとcracoをnpm installしたため正しくインストールできなかった
エラーその2
たぶん多くの人がこちらで引っかかったと思います。エラー内容
gitbash
$ yarn start
yarn run v1.22.17
$ craco start
C:\myportfolio\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54
craPlugins = match.loader.options.plugins();
^
TypeError: match.loader.options.plugins is not a function
(省略)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
原因:craco.config.jsの設定内容に問題があります。tailwind3.0からcracoの設定内容にtailwindに関する記述は必要なくなりました。
craco.config.js
module.exports = {}
参考にしたサイト
https://github.com/facebook/create-react-app/issues/11771#issuecomment-997217680