首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue配置Tailwind CSS 和 Font Awesome

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

2025-05-13 10:07:14 作者：清风细雨_林木木

这篇文章主要介绍了Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

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

一、Tailwind CSS 配置

1. 安装依赖

npm install tailwindcss@^2.2 postcss@^7 autoprefixer@^9

2. 创建配置文件

npx tailwindcss init

3. 创建样式文件

在 src/assets/tailwind.css 中添加：

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

4. 配置 PostCSS

创建 postcss.config.js：

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

5. 引入样式

在 main.js 中：

import '@/assets/tailwind.css';

6. 测试配置

在 App.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"

参考：见文末补充介绍。

二、引入方式的对比

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

推荐：正式项目使用 @tailwind 指令方式（第二种）

三、Font Awesome 配置（引入 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" rel="external nofollow"  />

使用示例：

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

补充：tailwindcss vue2简单配置

1.安装

最新的tailwind css使用post css 8版本，vue2不支持，所以需要指定安装postcss7的版本

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2.生成配置文件

在终端中输入代码:npx tailwindcss init生成一个空的配置文件。也可以生成一个包含所有默认配置的配置文件:npx tailwindcss init -fill。

npx tailwindcss init # 空的
npx tailwindcss init -fill # 包含默认的

这就创建了一个简单的配置文件，你可以在这个文件里定制你的tailwindcss （参考官网文档）

3.创建postcss文件

在项目的根目录下创建postcss.config.js文件。输入以下代码：

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

4.在main.js中引入

import "tailwindcss/tailwind.css"

总结

在vue2中安装引入tailwindcss的方法主要分为4步

安装对应版本的tailwindcss
使用代码生成配置文件
创建postcss.config.js文件
在main.js中引入
tailwindcss使用方法简单，可以在官网的文档中查看具体的使用方法。

到此这篇关于Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践的文章就介绍到这了,更多相关Vue配置 Tailwind CSS 和 Font Awesome内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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