Error: PostCSS plugin tailwindcss requires PostCSS 8
Error: PostCSS plugin tailwindcss requires PostCSS 8
我安装了新的 tailwindcss 2.0 版，但出现以下错误。我试图卸载 postcss 和 tailwindcss 但它不起作用。需要帮助。
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
at Processor.normalize (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
at new Processor (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
at postcss (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
at /Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/src/index.js:140:12
@ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css& 4:14-393 14:3-18:5 15:22-401
@ ./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css&
@ ./src/components/util/SlideInfo.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Grades.vue?vue&type=script&lang=js&
@ ./src/views/Grades.vue?vue&type=script&lang=js&
@ ./src/views/Grades.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://172.20.12.3:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
这是我的package.json
"name": "nifo-school",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"react": "^16.3.0",
"@ivanv/vue-collapse-transition": "^0.2.1",
"autoprefixer": "^10.0.2",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"electron": "^8.0.0",
"electron-drag": "^2.0.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"postcss-cli": "^=8.0",
"react-collapse": "^5.0.1",
"summernote": "^0.8.18",
"tailwindcss": "^2.0.1",
"v-click-outside": "^3.1.2",
"vue": "^2.6.11",
"vue-html-editor": "^0.2.1",
"vue-i18n": "^8.22.1",
"vue-router": "^3.2.0",
"vue2-editor": "^2.10.2",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"node-sass": "^4.12.0",
"postcss": "^=8.1",
"sass-loader": "^8.0.2",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
"vue-template-compiler": "^2.6.11"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}```
Thanks for help
您正在将 Tailwind 与依赖旧版本 PostCSS 的工具集成。您可以使用此文档 https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
对我有用：
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
卸载 Tailwind 并改用兼容性构建重新安装
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
我在使用 laravel 8 时遇到了同样的问题，因此请尝试使用“npm uninstall tailwindcss”卸载 tailwind，然后使用
重新安装它
npm 安装 tailwindcss@compat
然后 运行“npx tailwindcss init”如果你没有 tailwing.config.js 文件
之后 运行 npm 运行 观看。
当你遇到困难时，仍然按照 laravel 文档获取更多信息
https://laravel.com/docs/8.x/mix#tailwindcss
上述解决方案修复了 TaildWindCss PostCss 问题，但我遇到了另一个错误，即：
TypeError: getProcessedPlugins is not a function
解决方案是升级 Node 版本，在我的情况下，我从 v10 升级到 v15，这解决了我的问题。
奇怪的是我在一台开发机器上遇到了这个问题。 . .但不是另一个，具有相同的 package.json 文件，并使用相同的 node/npm (15.5/7.3)。我删除了node_modules，重新安装。没修好。
奇怪的是，最终修复是在重新安装节点模块之后，我所做的是：
npm uninstall tailwindcss
然后
npm i tailwindcss --save-dev
（注意，没有使用兼容包）并且运行良好。重新安装 node_modules 时我确实必须使用 --legacy-peer-deps，所以安装顺序在我的场景中很重要。 . .
遇到了同样的问题并做了以下解决；
- 使用 npm -ver 检查您的 npm 版本，并确保安装最新版本
- 同时检查您的 Node 版本并通过此 URL 更新到最新版本：“https://nodejs.org/en/download/”
下面的解决方案应该可以完美运行。
运行以下命令
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
编辑：删除了一些错误的空格。
你必须uninstall所有这些
npm uninstall autoprefixer postcss tailwindcss
然后运行这个命令，它会自动生成tailwind.css文件
vue add tailwind
我尝试了所有方法，但仍然出现 TypeError: getProcessedPlugins is not a function 错误。为我解决问题的是升级 nodejs 版本。
检查安装的节点版本
node -v
我的节点版本是 v10.23.0 并且正在使用 Ubuntu。我升级到 v14.15.4.
这是我升级节点的方式
sudo apt update
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt-get install -y nodejs
node -v
我还清理了缓存以更加确定
npm cache clean -f
升级后，我删除了项目中的 node_modules 文件夹。 运行 npm install 然后 运行 npm run dev 在项目文件夹中。
这是唯一对我有用的解决方案，所以分享它。
当我尝试使用精简版卸载和安装时出现依赖关系树错误。所以我不得不安装 yarn 而它有效。
npm uninstall tailwindcss postcss autoprefixer
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm uninstall tailwindcss postcss autoprefixer
然后
vue add tailwind
使用vue cli插件https://www.npmjs.com/package/vue-cli-plugin-tailwind
我正在 Mac 使用 VueJS 3 (@vue/cli 4.5.11)。对我来说，以下两个命令解决了这个问题：
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
此安装：
- tailwindcss 2.1.1
- postcss 8.2.10
- 自动前缀 10.2.5
要解决此错误，请卸载 Tailwind 并改用兼容版本重新安装：
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
的解决方案
已接受的答案现已过时。
从 v2.0 开始，Tailwind CSS 取决于 PostCSS 8. 之前接受的答案说明了如何 降级到 Post CSS8
相反，请执行以下操作以获得所有最新版本运行的所有内容
yarn add @storybook/addon-postcss
然后编辑您的 .storybook/main.js
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
{
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
};
https://storybook.js.org/addons/@storybook/addon-postcss
@dlporter98
虽然我没有使用 Vue，但我希望这对遇到类似问题的其他人有所帮助。就我而言，我将 TailwindCSS 与 Gulp (^4.0.2) 一起使用，并且能够通过删除 tailwind 及其依赖项来解决错误：
npm uninstall tailwindcss gulp-postcss autoprefixer
然后再次安装它们但明确指定 postcss 插件为版本 9:
npm install tailwindcss autoprefixer gulp-postcss@9
我尝试使用 gulp-postcss@latest，但发现它一直在安装 8.3.1 版本并且没有解决错误。更多信息可以在这里看到：https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
否则，我会附和使用 Tailwind 兼容版本。
对于升级到 Tailwind 3 并遇到此问题的用户，the following instructions Tailwind 自己的故障排除为我解决了问题。
具体而言，更改您的启动和构建脚本：
"start": "concurrently \"npm run start:css\" \"react-scripts start\"",
"start:css": "tailwindcss -o src/tailwind.css --watch",
"build": "tsc && npm run build:css && react-scripts build",
"build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m",
不过，您必须安装 concurrently 和 npm-run-all。
以下是我的postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
这意味着您必须在项目的索引文件 index.{tsx,js} 中导入 tailwind.css 而不是 index.css。
如果这对您有用，请记住您可能不再需要安装 @craco/craco。
我在升级的时候也遇到了这个问题。之前我使用 postCSS 完成设置。
官方文档说
Note that Tailwind CSS v3.0 requires PostCSS 8, and no longer supports PostCSS 7. If you can’t upgrade to PostCSS 8, we recommend using Tailwind CLI instead of installing Tailwind as a PostCSS plugin.
所以这次我使用cli 完成了设置。 https://tailwindcss.com/docs/installation
yarn remove tailwindcss postcss autoprefixer
yarn add --dev tailwindcss@latest @tailwindcss/typography@latest @tailwindcss/forms@latest @tailwindcss/aspect-ratio@latest @tailwindcss/line-clamp@latest postcss@latest autoprefixer@latest
npx tailwindcss -i ./src/assets/css/style.css -o ./src/assets/css/tailwind.css --watch
并且在 package.json 需要做这个改变
https://tailwindcss.com/docs/content-configuration#it-just-isn-t-working-properly
我的package.json
"start": "concurrently \"npm run start:css\" \"react-scripts start\"",
"start:css": "tailwindcss -o src/assets/css/tailwind.css --watch",
"build": "tsc && npm run build:css && react-scripts build",
"build:css": "NODE_ENV=production tailwindcss -o src/assets/css/tailwind.css -m",
这个答案帮我解决了问题
使用 Vue 3 和 Tailwindcss 3
- 创建
tailwind.config.js
- 创建
postcss.config.js
- 在
postcss.config.js 中添加以下内容
module.exports = {
plugins: {
tailwindcss: {
config: './tailwind.config.js'
}
}
}
以上配置适用于最新的 postcss、autoprefixer、vue 3 和 tailwind 3
这对我有用：
运行“npm 安装 tailwindcss postcss”
和“npm 安装 tailwindcss autoprefixer”
这将独立安装 postcss 和 autoprefixer。
对于那些由于使用像 Vuepress v1 这样的框架而坚持使用 PostCSS v8 的人来说，Yarn 等价物：
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
只需卸载 Tailwind 并re-install改用兼容版本：
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm 卸载 tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm install tailwindcss@latest postcss@latest autoprefixer@latest
我安装了新的 tailwindcss 2.0 版，但出现以下错误。我试图卸载 postcss 和 tailwindcss 但它不起作用。需要帮助。
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
at Processor.normalize (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
at new Processor (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
at postcss (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
at /Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/src/index.js:140:12
@ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css& 4:14-393 14:3-18:5 15:22-401
@ ./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css&
@ ./src/components/util/SlideInfo.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Grades.vue?vue&type=script&lang=js&
@ ./src/views/Grades.vue?vue&type=script&lang=js&
@ ./src/views/Grades.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://172.20.12.3:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
这是我的package.json
"name": "nifo-school",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"react": "^16.3.0",
"@ivanv/vue-collapse-transition": "^0.2.1",
"autoprefixer": "^10.0.2",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"electron": "^8.0.0",
"electron-drag": "^2.0.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"postcss-cli": "^=8.0",
"react-collapse": "^5.0.1",
"summernote": "^0.8.18",
"tailwindcss": "^2.0.1",
"v-click-outside": "^3.1.2",
"vue": "^2.6.11",
"vue-html-editor": "^0.2.1",
"vue-i18n": "^8.22.1",
"vue-router": "^3.2.0",
"vue2-editor": "^2.10.2",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"node-sass": "^4.12.0",
"postcss": "^=8.1",
"sass-loader": "^8.0.2",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
"vue-template-compiler": "^2.6.11"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}```
Thanks for help
您正在将 Tailwind 与依赖旧版本 PostCSS 的工具集成。您可以使用此文档 https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
对我有用：
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
卸载 Tailwind 并改用兼容性构建重新安装
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
我在使用 laravel 8 时遇到了同样的问题，因此请尝试使用“npm uninstall tailwindcss”卸载 tailwind，然后使用
重新安装它npm 安装 tailwindcss@compat
然后 运行“npx tailwindcss init”如果你没有 tailwing.config.js 文件
之后 运行 npm 运行 观看。
当你遇到困难时，仍然按照 laravel 文档获取更多信息 https://laravel.com/docs/8.x/mix#tailwindcss
上述解决方案修复了 TaildWindCss PostCss 问题，但我遇到了另一个错误，即：
TypeError: getProcessedPlugins is not a function
解决方案是升级 Node 版本，在我的情况下，我从 v10 升级到 v15，这解决了我的问题。
奇怪的是我在一台开发机器上遇到了这个问题。 . .但不是另一个，具有相同的 package.json 文件，并使用相同的 node/npm (15.5/7.3)。我删除了node_modules，重新安装。没修好。
奇怪的是，最终修复是在重新安装节点模块之后，我所做的是：
npm uninstall tailwindcss
然后
npm i tailwindcss --save-dev
（注意，没有使用兼容包）并且运行良好。重新安装 node_modules 时我确实必须使用 --legacy-peer-deps，所以安装顺序在我的场景中很重要。 . .
遇到了同样的问题并做了以下解决；
- 使用 npm -ver 检查您的 npm 版本，并确保安装最新版本
- 同时检查您的 Node 版本并通过此 URL 更新到最新版本：“https://nodejs.org/en/download/”
下面的解决方案应该可以完美运行。
运行以下命令
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
编辑：删除了一些错误的空格。
你必须uninstall所有这些
npm uninstall autoprefixer postcss tailwindcss
然后运行这个命令，它会自动生成tailwind.css文件
vue add tailwind
我尝试了所有方法，但仍然出现 TypeError: getProcessedPlugins is not a function 错误。为我解决问题的是升级 nodejs 版本。
检查安装的节点版本
node -v
我的节点版本是 v10.23.0 并且正在使用 Ubuntu。我升级到 v14.15.4.
这是我升级节点的方式
sudo apt update
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt-get install -y nodejs
node -v
我还清理了缓存以更加确定
npm cache clean -f
升级后，我删除了项目中的 node_modules 文件夹。 运行 npm install 然后 运行 npm run dev 在项目文件夹中。
这是唯一对我有用的解决方案，所以分享它。
当我尝试使用精简版卸载和安装时出现依赖关系树错误。所以我不得不安装 yarn 而它有效。
npm uninstall tailwindcss postcss autoprefixer
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm uninstall tailwindcss postcss autoprefixer
然后
vue add tailwind
使用vue cli插件https://www.npmjs.com/package/vue-cli-plugin-tailwind
我正在 Mac 使用 VueJS 3 (@vue/cli 4.5.11)。对我来说，以下两个命令解决了这个问题：
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
此安装：
- tailwindcss 2.1.1
- postcss 8.2.10
- 自动前缀 10.2.5
要解决此错误，请卸载 Tailwind 并改用兼容版本重新安装：
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
已接受的答案现已过时。
从 v2.0 开始，Tailwind CSS 取决于 PostCSS 8. 之前接受的答案说明了如何 降级到 Post CSS8
相反，请执行以下操作以获得所有最新版本运行的所有内容
yarn add @storybook/addon-postcss
然后编辑您的 .storybook/main.js
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
{
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
};
https://storybook.js.org/addons/@storybook/addon-postcss
@dlporter98
虽然我没有使用 Vue，但我希望这对遇到类似问题的其他人有所帮助。就我而言，我将 TailwindCSS 与 Gulp (^4.0.2) 一起使用，并且能够通过删除 tailwind 及其依赖项来解决错误：
npm uninstall tailwindcss gulp-postcss autoprefixer
然后再次安装它们但明确指定 postcss 插件为版本 9:
npm install tailwindcss autoprefixer gulp-postcss@9
我尝试使用 gulp-postcss@latest，但发现它一直在安装 8.3.1 版本并且没有解决错误。更多信息可以在这里看到：https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
否则，我会附和使用 Tailwind 兼容版本。
对于升级到 Tailwind 3 并遇到此问题的用户，the following instructions Tailwind 自己的故障排除为我解决了问题。
具体而言，更改您的启动和构建脚本：
"start": "concurrently \"npm run start:css\" \"react-scripts start\"",
"start:css": "tailwindcss -o src/tailwind.css --watch",
"build": "tsc && npm run build:css && react-scripts build",
"build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m",
不过，您必须安装 concurrently 和 npm-run-all。
以下是我的postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
这意味着您必须在项目的索引文件 index.{tsx,js} 中导入 tailwind.css 而不是 index.css。
如果这对您有用，请记住您可能不再需要安装 @craco/craco。
我在升级的时候也遇到了这个问题。之前我使用 postCSS 完成设置。
官方文档说
Note that Tailwind CSS v3.0 requires PostCSS 8, and no longer supports PostCSS 7. If you can’t upgrade to PostCSS 8, we recommend using Tailwind CLI instead of installing Tailwind as a PostCSS plugin.
所以这次我使用cli 完成了设置。 https://tailwindcss.com/docs/installation
yarn remove tailwindcss postcss autoprefixer
yarn add --dev tailwindcss@latest @tailwindcss/typography@latest @tailwindcss/forms@latest @tailwindcss/aspect-ratio@latest @tailwindcss/line-clamp@latest postcss@latest autoprefixer@latestnpx tailwindcss -i ./src/assets/css/style.css -o ./src/assets/css/tailwind.css --watch
并且在 package.json 需要做这个改变
https://tailwindcss.com/docs/content-configuration#it-just-isn-t-working-properly
我的package.json
"start": "concurrently \"npm run start:css\" \"react-scripts start\"",
"start:css": "tailwindcss -o src/assets/css/tailwind.css --watch",
"build": "tsc && npm run build:css && react-scripts build",
"build:css": "NODE_ENV=production tailwindcss -o src/assets/css/tailwind.css -m",
这个答案帮我解决了问题
使用 Vue 3 和 Tailwindcss 3
- 创建
tailwind.config.js - 创建
postcss.config.js - 在
postcss.config.js中添加以下内容
module.exports = {
plugins: {
tailwindcss: {
config: './tailwind.config.js'
}
}
}
以上配置适用于最新的 postcss、autoprefixer、vue 3 和 tailwind 3
这对我有用： 运行“npm 安装 tailwindcss postcss” 和“npm 安装 tailwindcss autoprefixer”
这将独立安装 postcss 和 autoprefixer。
对于那些由于使用像 Vuepress v1 这样的框架而坚持使用 PostCSS v8 的人来说，Yarn 等价物：
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
只需卸载 Tailwind 并re-install改用兼容版本：
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm 卸载 tailwindcss npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm install tailwindcss@latest postcss@latest autoprefixer@latest