「nuxt2配置tailwindcss」nuxt2添加tailwindcss详细步骤！解决版本不对称各种报错～～复制黏贴搞定！-Toy模板网

这篇具有很好参考价值的文章主要介绍了「nuxt2配置tailwindcss」nuxt2添加tailwindcss详细步骤！解决版本不对称各种报错～～复制黏贴搞定！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

运行环境

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文章来源地址https://www.toymoban.com/news/detail-821136.html

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