Tailwind CSS v4 在 Astro 中的最佳实践

安装

npx astro add tailwind --yes

会自动：

1. 装 @tailwindcss/vite + tailwindcss
2. 在 astro.config.mjs 里加 vite.plugins: [tailwindcss()]
3. 创建 src/styles/global.css（内容只有 @import "tailwindcss";）

在 Layout 里引入

---
import '../styles/global.css';
---

自定义主题

在 global.css 用 @theme 指令：

@import "tailwindcss";

@theme {
  --color-brand: #4f46e5;
  --font-sans: "PingFang SC", system-ui, sans-serif;
}

之后就能直接用 text-brand、bg-brand 这类工具类。

与 v3 的关键差异

项	v3	v4
配置	tailwind.config.js	@theme 指令写在 CSS
插件方式	PostCSS	@tailwindcss/vite
入口指令	@tailwind base/components/utilities	@import "tailwindcss";