鉴于初始化了这么多次，每次都忘记，遂记录

Vue

pnpm create vue@latest

略

TailwindCSS

https://tailwindcss.com/docs/installation/using-vite

第6步改为在main.ts中import

import './assets/main.css'; //替换为第三步import了TailwindCSS的文件

注意：主题设置（最新范式）

Tailwind CSS 的最新版本（v4.0）在主题设置上发生了重大的范式转移。与以往在 tailwind.config.js 中编写 JavaScript 对象不同，v4.0 采用了“CSS-first”的配置方式。

现在，你直接在 CSS 文件中通过 CSS 变量 来定义和扩展主题。

1. 核心变化：从 JS 到 CSS

在 v4.0 中，你不再需要频繁切换到配置文件，而是直接在你的主入口 CSS 文件中使用 @theme 指令。

基础设置示例

@import "tailwindcss";

@theme {
  /* 定义新的颜色 */
  --color-brand: #3b82f6;
  --color-accent: #f59e0b;

  /* 扩展或覆盖字体 */
  --font-sans: "Inter", ui-sans-serif, system-ui;

  /* 定义间距 */
  --spacing-128: 32rem;
}

2. 如何设置常见配置

颜色 (Colors)

当你定义 --color-* 变量时，Tailwind 会自动生成对应的类名（如 text-brand 或 bg-brand）。

  • 覆盖： 如果你命名为已有的颜色（如 --color-blue-500），它会覆盖默认值。
  • 新增： 如果是全新命名（如 --color-mint），它会作为扩展添加。

间距与尺寸 (Spacing)

@theme {
  --spacing-header: 5rem;
  --radius-xl: 1.5rem;
}

这会自动生成 h-header 或 rounded-xl 等工具类。

响应式断点 (Screens)

你可以轻松自定义断点：

@theme {
  --breakpoint-3xl: 1920px;
}

3. 为什么这样设计？

  1. 更快的编译速度： 通过 CSS 变量直接控制，减少了 JS 配置解析的开销。
  2. 原生 CSS 体验： 你定义的变量可以在非 Tailwind 的原生 CSS 中直接通过 var(--color-brand) 使用。
  3. 更好的 IDE 支持： VS Code 能够更直观地感知 CSS 变量。

4. 还在用 tailwind.config.js 吗？

虽然 v4 倾向于 CSS 配置，但如果你需要复杂的动态逻辑，或者正在从 v3 迁移，你仍然可以通过指令保留旧配置：

@plugin "./my-legacy-config.js";

注意： 确保你的 Vite 插件已经更新到最新版本，以支持 @import "tailwindcss"; 这种新的导入语法。

FontAwesome

https://docs.fontawesome.com/web/use-with/vue

注意：AddIcon步骤也必须做（即使只使用免费图标）

// in main.ts or main.js
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

const app = createApp(App)

app.component('font-awesome-icon', FontAwesomeIcon)
app.use(createPinia())
app.use(router)

app.mount('#app')

Add Whole Styles

Free only

If you’re just using the Free icons, the easiest way to get the icons into your app is to add the Free SVG Icon Packages. Here’s an example of how to do that:

/* add fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'/* import all the icons in Free Solid, Free Regular, and Brands styles */
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)

使用：

<FontAwesomeIcon icon="fa-solid fa-caret-down" class="ml-1" />

后续：FontAwesome全部打包，导致包大小很大，建议换Iconify