Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践

一、Tailwind CSS 配置

1. 安装依赖

bash 复制代码
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2. 创建配置文件

bash 复制代码
npx tailwindcss init

3. 创建样式文件

src/assets/tailwind.css 中添加:

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

4. 配置 PostCSS

项目根目录创建 postcss.config.js

js 复制代码
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

5. 引入样式

main.js 中:

js 复制代码
import '@/assets/tailwind.css';

6. 测试配置

App.vue 中添加测试代码:

vue 复制代码
<template>
  <div class="p-4">
    <h1 class="text-2xl font-bold text-blue-500">TailwindCSS 是否生效?</h1>
    <button class="mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
      测试按钮
    </button>
  </div>
</template>

第二种引入方式基本和第一种相同,不同的是直接引入:

复制代码
import "tailwindcss/tailwind.css"

参考:https://juejin.cn/post/7091578341194465317

二、引入方式的对比

特性 import "tailwindcss/tailwind.css" import '@/assets/css/tailwind.css'
是否可定制 Tailwind ❌ 不可以 ✅ 可以
是否使用 @tailwind 指令 ❌ 不使用 ✅ 使用
是否支持 PurgeCSS/裁剪 ❌ 默认不裁剪 ✅ 支持
是否适合生产环境 ❌ 主要用于 demo ✅ 适合生产环境

推荐 :正式项目使用 @tailwind 指令方式(第二种)

三、Font Awesome 配置(引入 Font Awesome 图标)

方法一:CDN 引入(简单快速)

public/index.html 中添加:

html 复制代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

使用示例:

html 复制代码
<i class="fa-solid fa-qrcode text-2xl text-primary"></i>

方法二:npm 安装(推荐生产环境)

  1. 安装依赖:
bash 复制代码
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/vue-fontawesome
  1. main.js 中配置:
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)
  1. 使用示例:
html 复制代码
<font-awesome-icon :icon="['fas', 'qrcode']" class="text-2xl text-primary" />
<font-awesome-icon :icon="['fab', 'weixin']" class="text-xl" />

四、总结对比

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

推荐:生产环境使用 npm 安装方式

相关推荐
AskHarries9 分钟前
Toolhub — 一个干净实用的在线工具集合
前端·后端
H尗24 分钟前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
昔人'32 分钟前
html`contenteditable`
前端·html
爱宇阳37 分钟前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
@大迁世界41 分钟前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js
crary,记忆43 分钟前
简介NPM 和 NPX
前端·学习·npm·node.js
wocwin44 分钟前
解决qiankun微前端Vue2+Element-ui主应用跳转到Vue3+Element-plus子应用样式冲突问题
vue.js
JianZhen✓1 小时前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
郝学胜-神的一滴1 小时前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大2 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络