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

运行环境

node和npm使用版本

node v14.21.3 (npm v6.14.18)

1.插件下载

官方文档说明

npm install -D @nuxtjs/[email protected] [email protected] postcss@^8.4.33 [email protected]

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