Rails 6 和 TailwindCSS 的 PostCSS 插件错误

Question

有一个使用 TailwindCSS 1.9 版的新 rails 6.0.3.4 应用程序。刚刚尝试升级到最新的 TailwindCSS 版本后，我收到以下错误：

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)

Module build failed (from ./node_modules/postcss-loader/src/index.js):

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

尝试运行时此错误仍然存​​在

垃圾箱/网络包

找不到有关如何升级到 PostCSS 版本 8 的任何信息。

Answer 1

yarn remove tailwindcss

yarn add tailwindcss@compat

bin/webpack

这为我解决了问题，让我使用了 tailwindcss 2。 Tailwind 发布了一个与 PostCSS7 兼容的版本。

Answer 2

分两步解决问题。

1. 按照 TailwindCSS 安装说明https://tailwindcss.com/docs/installation

第一个建议是使用命令

npm install tailwindcss postcss autoprefixer

但随后仍然得到了本质错误

Error: PostCSS plugin tailwindcss requires PostCSS 8.

目前似乎没有办法解决这个问题

2. 使用 TailwindCSS 安装指南中的进一步说明https://tailwindcss.com/docs/installation#postcss-7-compatibility-build

该过程是然后应用以下命令：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

然后降级 PostCSS 和 autoprefixer 组件，然后当bin/webpack重新运行时最终成功。