Headless UI

Headless UI 是 Tailwind Labs 开发的一套完全无样式、无障碍的 UI 组件库，专为 React 和 Vue 设计。它的核心理念是提供交互逻辑和可访问性支持，而不强加任何视觉样式，允许开发者完全控制组件的外观。这使得 Headless UI 特别适合与 Tailwind CSS 配合使用，只需通过 utility class 即可快速定制界面。

核心组件与功能

该库包含多种常用组件，如按钮、下拉菜单、对话框、弹出框、列表选择、开关、选项卡、过渡动画等。每个组件都经过无障碍优化，遵循 WAI-ARIA 标准，确保键盘导航和屏幕阅读器兼容。例如，Listbox 组件支持键盘选择、自动聚焦和 ARIA 属性，Dialog 提供焦点陷阱和关闭行为。

适用人群

Headless UI 非常适合需要自定义 UI 设计的前端开发人员，尤其是那些使用 Tailwind CSS 构建项目的人。它也适合希望确保无障碍访问但又不想从零编写交互逻辑的团队。

如何使用

以 React 为例，安装 @headlessui/react 后即可导入组件。例如，一个简单的下拉菜单只需导入 Menu、MenuItem 等，并用 Tailwind 类控制样式。Vue 版本用法类似，安装 @headlessui/vue 并按需引入。

注意事项

由于组件无样式，必须自行添加 CSS 或 Tailwind 类，否则默认不可见。建议搭配 Tailwind CSS 使用以获得最佳体验。另外，版本更新较快，请参考官方文档了解最新 API 变化。