「nuxt2配置tailwindcss」nuxt2添加tailwindcss详细步骤！解决版本不对称各种报错～～

本文主要是介绍「nuxt2配置tailwindcss」nuxt2添加tailwindcss详细步骤！解决版本不对称各种报错～～，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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"
}

这篇关于「nuxt2配置tailwindcss」nuxt2添加tailwindcss详细步骤！解决版本不对称各种报错～～的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---