Astro + Tailwind v4 集成：用 Vite 插件替代 @astrojs/tailwind

为什么 @astrojs/tailwind 不再工作

Astro 6 移除了对 @astrojs/tailwind 的支持。原因是 Tailwind v4 本身已经通过 Vite 插件运行，不再需要在 Astro 层面做额外集成。

正确安装方式

npm install tailwindcss @tailwindcss/vite

配置 Vite 插件

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';

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

CSS-first 配置

Tailwind v4 的配置从 JS 文件迁移到 CSS 中：

/* src/styles/global.css */
@import "tailwindcss";

@theme {
  --color-brand-500: #3b82f6;
  --font-sans: 'Inter', sans-serif;
}

自定义颜色会自动生成对应的 utility class：bg-brand-500、text-brand-500 等。

在 Astro 中使用

---
// 在 BaseLayout 或 BaseHead 中导入
import '../styles/global.css';
---
<html>
  <body class="bg-gray-950 text-white font-sans">
    <slot />
  </body>
</html>

迁移清单

卸载 @astrojs/tailwind
安装 tailwindcss + @tailwindcss/vite
在 astro.config.mjs 添加 Vite 插件
删除 tailwind.config.mjs
把配置迁移到 CSS @theme 块
确保 @import "tailwindcss" 在全局 CSS 首行
构建测试

注意事项

Tailwind v4 的 @apply 语法有微小变化，@layer 需配合 @import
dark: 变体在 v4 中默认基于 prefers-color-scheme，手动控制需配置
v4 移除了 @tailwind 指令，全部改用 @import "tailwindcss"

其实 Tailwind v4 的改进方向很好——配置更集中、构建更快。唯一的不便是生态还在追赶，比如 tailwindcss-animate 等插件尚未完全适配。

登录 / 注册