Headless UI 无头组件：Tailwind 官方出品，交互组件拿来即用

Headless UI 是 Tailwind Labs 官方出的无头组件集合——就是不写样式的交互组件，菜单、对话框、开关这些都做好了无障碍与键盘行为，外观你用 Tailwind 或自己的 CSS 填。React 和 Vue 都支持。

它解决什么问题

自己写对话框、下拉菜单最容易翻车的是无障碍：焦点陷阱、Esc 关闭、读屏播报，漏一个就是 bug。

团队用 Tailwind 写样式，却要为每个交互组件重做一遍行为逻辑，重复劳动多。

核心能力

它覆盖不到的地方

Headless UI 主打「够用的交互件」，组件数量刻意克制。富文本编辑、数据表格、日期选择器等复杂件不在范围内，需要另找专业库。

所以它是「补全交互行为」的工具，不是「整套后台模板」。配合 Tailwind 自己拼界面最合适；要现成布局请去看后台模板类方案。

同类工具怎么选

谁适合用

• 用 Tailwind CSS、想省掉交互组件行为代码的团队
• 需要对话框/菜单/标签页这类常见件且要无障碍的人
• 同时维护 React 与 Vue 项目、想一套思路复用的

怎么开始

1. 访问 headlessui.com，按框架选 React 或 Vue 文档。
2. 用 npm 安装 @headlessui/react 或 @headlessui/vue。
3. 引入组件，用 Tailwind 类写外观。
4. 对照示例检查键盘与读屏行为。
5. 复杂组件（表格/日期）另选专业库，不硬凑。

常见问题

必须装 Tailwind 吗？
不必须。它只是无样式组件，你用任何 CSS 方案都能填外观；只是和 Tailwind 搭配最顺手。

组件够做后台吗？
能做交互件，但表格、日期选择器等不在范围，后台整体仍需自己拼或借模板。

Vue 版功能一样吗？
核心组件双方都有，个别细节以各自文档为准。

授权与合规

Headless UI 采用 MIT 协议开源免费，可自由用于商业与个人项目，可修改再分发，只需保留版权与授权声明。 官网：headlessui.com。