Vue 2 项目中配置 Tailwind CSS、Font Awesome和daisyUI

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

---

上面的版本虽然可用，但是过于老旧，使用手册官网已经不在维护，甚至很多功能是不支持的，所以建议使用新版本。

测试以后最新可用版本是：tailwindcss@^3.3 daisyui@^3.0 postcss autoprefixer是可用的。

安装命令：

npm install tailwindcss@^3.3 daisyui@^3.0 postcss autoprefixer

---

如果已经安装了其他版本，可以删除原来的依赖：

npm uninstall tailwindcss daisyui postcss autoprefixer

删除以后，重新安装。

---

查看当前配置版本：

命令：

npm list vue
npm list tailwindcss
npm list daisyui
npm list postcss
npm list autoprefixer

可以逐条查看环境配置版本。

备注：这里的postcss autoprefixer 一个是 CSS 处理工具，一个是 辅助插件，具体解释如下：

• PostCSS：一个用 JavaScript 编写的 CSS 处理工具，允许开发者通过插件来处理 CSS。它本身并不提供功能，而是作为一个平台，开发者可以通过安装不同的插件来实现不同的功能（如优化、自动添加前缀、自动压缩、支持未来的 CSS 语法等）。

• autoprefixer：是 PostCSS 中非常常用的一个插件，自动根据你设置的浏览器支持范围，为 CSS 样式添加所需的浏览器前缀，确保在不同的浏览器中兼容性。

---

备注：安装的什么版本就去什么版本的手册中操作，大版本会存在组件差异！

选择手册如图：

---

安装好插件以后，还要安装和配置其他文件，步骤如下：

1. 使用 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'], // 可选
  },
}

2. 配置 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. 配置 src/assets/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

4. main.js 中引入 tailwind.css

import '@/assets/tailwind.css';

5. 测试是否生效

 <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 安装（推荐生产环境）

1. 安装依赖：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/vue-fontawesome

2. 在 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)

3. 使用示例：

<font-awesome-icon :icon="['fas', 'qrcode']" class="text-2xl text-primary" />
<font-awesome-icon :icon="['fab', 'weixin']" class="text-xl" />

总结对比

使用方式	优点	缺点
CDN 引入	简单、快速	无法按需加载，文件较大
npm 引入 + 组件方式	可按需加载图标，灵活	需安装和注册，稍复杂

推荐：生产环境推荐 npm 安装方式