配置 Tailwind 与图标库

本页把前端骨架推进到“样式层和图标库都已经按项目默认值接入”的状态。后续页面和组件都应该建立在 tailwindcss v4 和 Font Awesome Free v7 的前提下。

这篇教程解决什么

• tailwindcss v4 应该从哪里接入。
• Font Awesome Free v7 应该放在哪一层导入。
• 为什么样式入口和图标入口要尽量收敛到少数文件。

前置条件

• 已完成 创建前端项目。
• frontend-starter 目录已存在。

配套代码

• 当前样例：frontend-starter
• 当前关注文件：package.json
• 当前关注文件：vite.config.ts
• 当前关注文件：app.css

我们要做的事

• 给项目加入 Tailwind v4 相关依赖。
• 给项目加入 Font Awesome Free v7。
• 把样式入口和图标入口固定在 src/app.css。

操作步骤

1. 在 package.json 中加入这些依赖：

{
  "dependencies": {
    "@fortawesome/fontawesome-free": "^7.0.0"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.0.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.8.0",
    "vite": "^7.0.0"
  }
}

2. 在 vite.config.ts 中启用 Tailwind v4 的 Vite 插件：

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()]
});

3. 在 src/app.css 中集中导入 Tailwind 和 Font Awesome：

@import "tailwindcss";
@import "@fortawesome/fontawesome-free/css/all.min.css";

4. 安装依赖：

cd samples/tutorials/frontend-starter
pnpm install

如果 npm.feinian.net 尚未同步 @tailwindcss/vite，先补齐镜像，再继续下一步；不要在教程配套代码里临时改回个人机器的全局 registry。

5. 启动本地前端：

pnpm dev

验证结果

• 页面已经能正常加载 Tailwind 工具类。
• 页面中的 Font Awesome 图标已经显示，而不是空白方块。
• 后续页面和主题样式都可以继续建立在 src/app.css 这个统一入口上。

下一篇读什么

• 配置 Light / Dark 双主题