它来了！Tailwind v4。已准备就绪，供您试用。您今天就可以开始使用它。

开始使用 查看演示

新特性

• CLI 现在可以使用 Tailwind v4 初始化项目。
• 全面支持新的 @theme 指令和 @theme inline 选项。
• 所有组件均已针对 Tailwind v4 更新。
• 每个基元现在都有一个用于样式的 data-slot 属性。
• 我们已修复并清理了组件的样式。
• 我们将弃用 toast 组件，转而使用 sonner。
• 按钮现在使用默认光标。
• 我们将弃用 default 样式。新项目将使用 new-york。
• HSL 颜色现在转换为 OKLCH。

注意：这是非破坏性更改。您现有的 Tailwind v3 应用程序仍可正常工作。当您添加新组件时，它们将保持 v3 版本，直到您升级。只有新项目会从 Tailwind v4 开始。

实时预览

我在这里准备了一个包含所有更新组件的演示：https://v4.shadcn-vue.com

查看并测试组件。如果您发现任何错误，请在 GitHub 上告诉我。

尝试使用

请参阅以下特定框架指南以开始使用。

Vite

Nuxt

Astro

Laravel

手动安装

升级您的项目

重要提示： 升级前，请阅读 Tailwind v4 兼容性文档并确保您的项目已准备好升级。Tailwind v4 使用前沿的浏览器功能，专为现代浏览器设计。

使用 shadcn-vue 的主要优势之一是，您最终得到的代码与您自己编写的代码完全相同。没有隐藏的抽象层。

这意味着当依赖项有新版本发布时，您只需遵循官方的升级路径即可。

以下是升级现有项目的方法（完整文档即将推出）：

1. 遵循 Tailwind v4 升级指南

• 按照官方升级指南升级到 Tailwind v4：https://tailwindcss.com/docs/upgrade-guide
• 使用 @tailwindcss/upgrade@next codemod 移除已弃用的实用类并更新 tailwind 配置。

2. 更新您的 CSS 变量

codemod 会将您的 CSS 变量作为引用迁移到 @theme 指令下。

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
  }
}

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
}

这可行。但为了更轻松地处理颜色和其他变量，我们需要移动 hsl 包装器并使用 @theme inline。

操作方法如下：

1. 将 :root 和 .dark 移出 @layer base。
2. 将颜色值包装在 hsl() 中
3. 将 inline 选项添加到 @theme，即 @theme inline
4. 从 @theme 中移除 hsl() 包装器

:root {
  --background: hsl(0 0% 100%); // <-- 用 hsl 包装
  --foreground: hsl(0 0% 3.9%);
}

.dark {
  --background: hsl(0 0% 3.9%); // <-- 用 hsl 包装
  --foreground: hsl(0 0% 98%);
}

@theme inline {
  --color-background: var(--background); // <-- 移除 hsl
  --color-foreground: var(--foreground);
}

此更改使得在实用类中和 CSS 外部（例如在 JavaScript 中使用颜色值）访问主题变量变得更加简单。

3. 使用新的 size-* 实用类

新的 size-* 实用类（在 Tailwind v3.4 中添加）现在得到 tailwind-merge 的完全支持。您可以用新的 size-* 实用类替换 w-* h-*：

- w-4 h-4
+ size-4

4. 安装并更新您的依赖项

pnpm i tw-animate-css
pnpm up reka-ui lucide-vue-next tailwind-merge clsx --latest