与@tailwindui/react的实用友好过渡
内容提要
Tailwind UI发布了@tailwindui/react库，提供低级原语，将实用优先的HTML转化为交互式用户界面。新组件<Transition>支持React中的进入/离开过渡效果，提升了与Vue和Alpine.js的一致性，未来将增加更多组件。
延伸解读
为何 React 需要专门的过渡组件
文章指出，Tailwind UI 最初是纯 HTML 产品，但许多设计具有交互性，而将交互行为移植到不同 JavaScript 框架并不容易。Vue 有内置的 <transition> 组件，提供实用友好的 API，但在 React 中复制这种效果一直很困难，因为此前没有支持实用驱动过渡样式的库。@tailwindui/react 的 <Transition> 组件填补了这一空白，让 React 开发者也能用类似 Vue 的方式实现进入/离开过渡。
与 Vue 和 Alpine.js 的 API 一致性
新组件 <Transition> 的 API 设计借鉴了 Vue 的 <transition> 组件，使用 enter、enterFrom、enterTo、leave、leaveFrom、leaveTo 等属性来定义过渡类名。这种一致性降低了开发者在不同框架间切换的学习成本，也使得 Tailwind UI 的交互体验在 React 中与 Vue 和 Alpine.js 保持同步。文章提到，未来还会为 Vue 提供更多组件。
当前功能与未来规划
目前 @tailwindui/react 仅包含 <Transition> 组件，但文章明确表示未来几个月会增加更多组件，如下拉菜单、切换开关和模态框等，并且也会为 Vue 提供。这意味着该库仍处于早期阶段，开发者可以关注后续更新。文章还提到 <Transition> 支持一些高级功能，如不渲染额外 DOM 元素、协调相关过渡以及初始挂载时的过渡，具体可查阅文档。
Q&A
什么是@tailwindui/react库？
这是一个提供低级原语的库，用于将实用优先的HTML转化为交互式用户界面。
@tailwindui/react库中有哪些新组件？
新组件包括<Transition>，未来还将增加下拉菜单、切换开关和模态框等。
<Transition>组件的主要功能是什么？
<Transition>组件支持React中的进入/离开过渡效果，提升了与Vue和Alpine.js的一致性。
如何在React中使用<Transition>组件？
可以通过导入<Transition>并使用useState来控制其显示状态，示例代码已提供。
为什么@tailwindui/react库的发布很重要？
因为它填补了在React中实现实用优先的过渡效果的空白，使得交互设计更为简单。
未来@tailwindui/react库会增加哪些功能？
未来将增加更多组件，如下拉菜单、切换开关和模态框等。
