运行环境
node和npm使用版本
node v14.21.3 (npm v6.14.18)
1.插件下载
npm install -D @nuxtjs/tailwindcss@3.4.3 tailwindcss@3.4.1 postcss@^8.4.33 autoprefixer@10.4.17
2.nuxt.config.js配置
module.exports = {
// ...
buildModules: ['@nuxtjs/tailwindcss'],
// ...
}
3.tailwind.config.js
npx tailwindcss init
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
4.全局引入css
创建全局css文件
/assets/css/global.css
// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
配置nuxt.config.js
module.exports = {
// ...
css: [
// ...
'~assets/css/global.css',
],
// ...
}
package.json插件版本
"dependencies": {
"nuxt": "^2.14.7",
"vue": "^2.6.12",
},
"devDependencies": {
"@nuxtjs/tailwindcss": "^3.4.3",
"autoprefixer": "^10.4.17",
"node-sass": "^4.14.1",
"postcss": "^8.4.33",
"sass-loader": "^8.0.0",
"tailwindcss": "^3.4.1"
}