Vue 2 项目中配置 Tailwind CSS 和 安装 daisyUI
首先重点注意，Vue2中安装Tailwind和daisyui一定要注意版本。
最佳版本 使用 Vue 2 + TailwindCSS v2 + DaisyUI v1 的兼容版本
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
"postcss": "^7.0.39",
"autoprefixer": "^9.8.8",
"daisyui": "1.14.2"
安装命令：
npm install tailwindcss@npm:@tailwindcss/postcss7-compat@2.2.17 \postcss@^7 autoprefixer@^9 daisyui@1.14.2
如果已经安装了其他版本，可以删除原来的依赖：
npm uninstall tailwindcss daisyui postcss autoprefixer
删除以后，重新安装
- 使用
npx tailwindcss init生成tailwind.config.js，然后配置：
module.exports = {content: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],plugins: [require('daisyui')],daisyui: {// prefix: 'dz-', // 添加前缀防止与 ElementUI 冲突// themes: ['light', 'dark', 'cupcake'], // 可选},
}
- 配置 postcss.config.js
module.exports = {plugins: {tailwindcss: {},autoprefixer: {},},
};
- 配置 src/assets/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
- main.js 中引入
tailwind.css
import '@/assets/tailwind.css';
- 测试是否生效
<div class="p-4 space-y-4"><div class="bg-blue-500 text-white p-2">Tailwind 正常</div><button class="btn btn-primary">DaisyUI 按钮</button></div>
Vue 2 中 Tailwind CSS 和 Font Awesome 的安装
Tailwind CSS 的 tailwindcss/tailwind.css 和 @/assets/css/tailwind.css 引入的区别
| 特性 | import "tailwindcss/tailwind.css" | import '@/assets/css/tailwind.css' |
|---|---|---|
| 是否可定制 Tailwind | ❌ 不可以 | ✅ 可以 |
是否使用 @tailwind 指令 | ❌ 不使用 | ✅ 使用 |
| 是否支持 PurgeCSS/裁剪 | ❌ 默认不裁剪 | ✅ 支持 |
| 是否适合生产环境 | ❌ 主要用于 demo | ✅ 适合生产环境 |
推荐：正式项目使用 @tailwind 指令方式（第二种）
引入 Font Awesome 图标
方法一：CDN 引入（简单快速）
在 public/index.html 中添加：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
使用示例：
<i class="fa-solid fa-qrcode text-2xl text-primary"></i>
方法二：npm 安装（推荐生产环境）
- 安装依赖：
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/vue-fontawesome
- 在
main.js中配置：
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faQrcode } from '@fortawesome/free-solid-svg-icons'
import { faWeixin } from '@fortawesome/free-brands-svg-icons'library.add(faQrcode, faWeixin)
Vue.component('font-awesome-icon', FontAwesomeIcon)
- 使用示例：
<font-awesome-icon :icon="['fas', 'qrcode']" class="text-2xl text-primary" />
<font-awesome-icon :icon="['fab', 'weixin']" class="text-xl" />
总结对比
| 使用方式 | 优点 | 缺点 |
|---|---|---|
| CDN 引入 | 简单、快速 | 无法按需加载，文件较大 |
| npm 引入 + 组件方式 | 可按需加载图标，灵活 | 需安装和注册，稍复杂 |
推荐：生产环境推荐 npm 安装方式
)
)
)
