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 安裝方式
)
)
)
