运行环境
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/xxx.css
// xxx.css
@tailwind base;
@tailwind components;
@tailwind utilities;
配置nuxt.config.js
module.exports = {// ...css: [// ...'~assets/css/xxx.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"
}