0

発生している問題

Docker、Rails6系、Tailwindcss バージョン3を使用して開発を行っています。別の問題があり、tailwindをv2からv3にするためにpackage.jsonでアンインストール、再インストールを行いました。

すると、localhost:3000を開いた際に以下のエラーが発生しました。

画像の説明をここに入力

package.jsonの中身は以下のようになっています。

# package.json

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "postcss": "^8.4.14",
    "postcss-loader": "^4.3.0",
    "tailwindcss": "^3.1.6",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3"
  }
}

考えられること

元々のpackage.jsonの中身は以下の状態でしたが、npm uninstallとnpm installを繰り返して上記の内容になったので、vue関連とpostcss、tailwindcssのバージョンの組み合わせに問題があるかもと考えました。

調べても解決に辿りつかないのでぜひお力添えのほどよろしくお願いします。

# package.json
{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fullhuman/postcss-purgecss": "4",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "autoprefixer": "10",
    "postcss": "8",
    "postcss-loader": "4",
    "tailwindcss": "2",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.46.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3"
  }
}

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。