2025-11-12
React Flow 用户界面组件已更新到 React 19 和 Tailwind CSS 4
我们的 React Flow UI 组件已更新，以支持最新版本的 shadcn/ui，适用于 React 19 和 Tailwind 4！
🌐 Our React Flow UI components have been updated to support the latest version of shadcn/ui, on React 19 and Tailwind 4!
此更新包括来自最新版本的 shadcn/ui 的全新外观，以及一个新的 UI 组件教程，帮助你快速入门。
🌐 This update includes a fresh look from the latest version of shadcn/ui , and a new UI Components tutorial to get you started.
如何升级你的项目
🌐 How to upgrade your project
要升级你的项目，请按照以下步骤操作。
🌐 To upgrade your project, follow the steps below.
第1步：更新依赖。
🌐 Step 1: Update dependencies.
npm install react@latest react-dom@latest tailwindcss@latest或者在 package.json 中手动操作，然后运行
🌐 Or do so manually in package.json, and then run
npm install步骤 2：运行 Tailwind CSS 升级代码变换工具。
🌐 Step 2: Run the Tailwind CSS upgrade codemod.
在shadcn/ui Tailwind CSS 4 升级指南 中了解更多可用的代码修改工具。
🌐 Read more about available codemods in the shadcn/ui Tailwind CSS 4 upgrade guide .
npx @tailwindcss/upgrade第3步：将 React Flow 样式移到 global.css 文件中。
🌐 Step 3: Move the React Flow styles to the global.css file.
重要: Tailwind CSS 4 现在完全在 CSS 中配置。你不再是在 App.tsx 中导入你的 @xyflow/react/dist/style.css 文件，而是需要在导入 tailwindcss 之后，在你的 global.css 文件中导入它。
// Tailwind CSS 3
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
// Tailwind CSS 4
+@import "tailwindcss";
+@import "tw-animate-css";
+@layer base {
+ @import "@xyflow/react/dist/style.css";
+}我们建议从你的项目中移除旧的 js/ts Tailwind 配置，并迁移到仅使用 CSS 变量的新配置。这可以让事情变得更简单：你可以在单个 CSS 文件中配置与应用设计系统和外观相关的所有内容。
🌐 We recommend removing the old js/ts tailwind configuration from your project, and migrating to the new CSS-variable-only configuration.
This can make things a lot simpler: you can configure everything related to your application’s design system and look in a single CSS file.
-import '@xyflow/react/dist/style.css';
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}第4步：更新组件
🌐 Step 4: Update the components
对于你想要更新的每个组件，你可以运行以下命令。
🌐 For each component you want to update, you can run the following commands.
如果它是一个 shadcn/ui 组件：
🌐 If it’s a shadcn/ui component:
npx shadcn@latest add component-name如果它是一个 React Flow UI 组件：
🌐 If it’s a React Flow UI component:
npx shadcn@latest add https://ui.reactflow.dev/component-name