🎃

React TypeScriptでTailwind CSSの環境構築後cracoの環境構築で躓いた話(Tailwind CSSが効かない)

2022/10/10に公開約700字

●Tailwind CSSが効かなかった理由はcraco.config.jsのpostcss:部分。

先ずcracoを使わずにTailwind CSSが動作するか確認。
React.js TypeScriptでTailwind CSSの環境構築はこちらで。
https://dev.to/ethand91/creating-a-react-app-with-typescript-tailwind-support-18b8

動作した場合。
cracoのインストール

npm i @craco/craco

エラーが出たのでこちらで。

npm i @craco/craco --legacy-peer-deps

craco.config.jsの変更 (postcss: -> postcssOptions:に変更)

module.exports = {
  style: {
    postcssOptions: {
      plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
      ],
    },
  },
};

package.jsonの変更,一部抜粋(react-scripts -> craco)

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

以上で動作確認済み。

Discussion

ログインするとコメントできます