nuxt2添加tailwindcss详细步骤!解决版本不对称各种报错~~

发布时间:2024年01月23日

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"
}
文章来源:https://blog.csdn.net/qq_40230735/article/details/135771839
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。