我正在尝试在我的Laravel应用程序中将tailwind升级到版本3。
我按照中的指示进行了安装
https://tailwindcss.com/docs/upgrade-guide#upgrade-包装
npm安装-Dtailwindcss@latestpostcss@latestautoprefixer@latest
这很好。但是当我运行npm run dev时，我得到了这个错误：
中的错误/resources/assets/css/tailwindcore.css模块构建失败(从./node_modules/css-loader/index.js(：ModuleBuildError:模块生成失败(从./node_modules/postpass-loader/src/index.js(：错误：PostCSS插件tailwindcss需要PostCSS 8。
我从文档中读到，顺风3现在需要PostCSS8。但是，PostCSS8已经安装。为什么我仍然会收到这个错误？我还试图删除node_modules文件夹并重新安装，但也出现了同样的错误。
这是我的包.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --open --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"axios": "^0.19",
"babel-plugin-component": "^1.1.1",
"bootstrap": "^4.5.2",
"cross-env": "^7.0",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"jquery": "^3.5.1",
"laravel-mix": "^4.1.4",
"laravel-mix-purgecss": "^5.0.0-rc.1",
"lodash": "^4.17.20",
"popper.js": "^1.12",
"postcss": "^8.4.4",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.27.0",
"sass-loader": "^7.3.1",
"tailwindcss": "^3.0.0",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"vuetifyjs-mix-extension": "0.0.2"
},
"dependencies": {
"@tailwindcss/forms": "^0.3.3",
"axiom": "^0.1.6",
"buefy": "^0.9.7",
"element-ui": "^2.13.1",
"modal-video": "^2.4.2",
"prod": "^1.0.1",
"trumbowyg": "^2.21.0",
"vue-multiselect": "^2.1.6",
"vue-scrollto": "^2.19.1",
"vue-select": "^3.11.2",
"vue-trumbowyg": "^3.6.2",
"vuetify": "^2.3.13",
"vuetify-loader": "^1.6.0"
}
}
我的webpack.mix.js设置：
.postCss("resources/assets/css/tailwindcore.css", "public/css", [
require("tailwindcss"),
])
我的顺风。config.js:
const colors = require('tailwindcss/colors')
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
backgroundImage: {
'gradient-radial-at-r': 'radial-gradient(ellipse at right, var(--tw-gradient-stops))',
},
colors: {
lightblue: {
DEFAULT: '#08c'
},
cyan: colors.cyan,
}
},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms'),],
}
问题是您运行的是旧版本的Laravel Mix。您将面临的另一个问题是@tailwindcss/form插件也需要更新。
使用更新软件包
npm install laravel-mix@latest @tailwindcss/forms@latest
然后，您需要为新版Laravel Mix:更新package.json中的scripts
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},