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 安装方式

相关推荐
拾光拾趣录2 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00003 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl3 分钟前
深度剖析Kafka读写机制
前端
FogLetter4 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan5 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan6 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan7 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录7 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee7 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我8 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html