文章目录Headless UI无样式、全无障碍的 UI 组件库Headless UI无样式、全无障碍的 UI 组件库Tailwind CSS 团队推出的 Headless UI提供了完整的、完全无样式的 UI 组件已获得 28k Star。Headless UI 是一组完全无样式、且具备完整无障碍访问能力的 UI 组件专门为与 Tailwind CSS 搭配使用而设计。如果你用过 Tailwind CSS应该对这套组件库不陌生。组件库目前同时支持 React 和 Vue 两个版本覆盖了最主流的前端框架生态。为什么需要无样式的组件市面上大多数 UI 组件库都自带一套预设样式比如 Ant Design、Element Plus。它们的优势是开箱即用但缺点也很明显——想要定制样式往往要写一堆覆盖代码甚至需要修改源码。Headless UI 走的是另一条路组件只提供行为逻辑和可访问性样式全部交给开发者自己控制。配合 Tailwind CSS 的原子化样式方案可以快速构建出符合设计稿的组件不需要和框架样式打架。覆盖的组件Headless UI 提供了日常开发中最常用的交互组件Listbox下拉选择Combobox带搜索的选择框Menu菜单Dialog弹窗Popover弹出气泡Tabs标签页Transition过渡动画Disclosure折叠面板Switch开关Radio Group单选框组每个组件都遵循 WAI-ARIA 规范键盘导航、屏幕阅读器支持都内置好了。安装使用安装命令npm install headlessui/reactlatestVue 项目则安装npm install headlessui/vuelatest如果你愿意尝鲜也可以安装 insiders 版本对应主分支最新提交npm install headlessui/reactinsiders需要注意insiders 版本不遵循 semver 规范API 在正式发布前可能会有变化。使用示例以 Switch 开关组件为例与 Tailwind CSS 配合只需要写几行代码import { useState } from react import { Switch } from headlessui/react function MyToggle() { const [enabled, setEnabled] useState(false) return ( Switch checked{enabled} onChange{setEnabled} className{${enabled ? bg-blue-600 : bg-gray-200} relative inline-flex h-6 w-11 items-center rounded-full} span classNamesr-onlyEnable notifications/span span className{${enabled ? translate-x-6 : translate-x-1} inline-block h-4 w-4 transform rounded-full bg-white transition} / /Switch ) }样式完全由 Tailwind CSS 控制想要什么外观都可以自由调整。生态与社区Headless UI 目前提供三个包React 版本、Vue 版本以及一个 Tailwind CSS 插件用于增强组件样式能力。每个包都在活跃维护中社区讨论在 GitHub Discussions 中进行。如果你正在使用 Tailwind CSS 并且厌倦了和 UI 库的样式打架Headless UI 值得一试。中社区讨论在 GitHub Discussions 中进行。如果你正在使用 Tailwind CSS 并且厌倦了和 UI 库的样式打架Headless UI 值得一试。