Flowbite

Flowbite 是基于 Tailwind CSS 的开源 UI 组件生态。官方文档说明，按钮、导航等样式由 Tailwind utilities 构成，Dropdown、Modal、Tooltip、Datepicker 等交互使用原生 JavaScript，并支持 TypeScript；生态还包括 Figma 文件、Pro 资源以及面向不同框架的实现。

先区分样式层与行为层

Tailwind v4 项目按文档导入主题

当前快速开始面向 Tailwind CSS v4：安装 flowbite，在主 CSS 中导入 Flowbite 默认或其他主题，并确保构建器扫描组件代码。旧 Tailwind v3 项目有单独升级说明，不能把两代配置混在一起后依靠偶然生效。

Data attributes 适合轻量页面

静态站或服务端模板可用 data 属性快速连接按钮与 Modal、Dropdown 等目标，再加载 Flowbite JavaScript。检查 ID 唯一、脚本初始化时机和动态插入节点；局部刷新或单页路由切换后，重复注册事件可能导致一次点击触发多次。

复杂应用优先使用框架集成

React、Vue、Svelte 或 Angular 项目已经有自己的状态与生命周期时，直接操作 DOM 容易与虚拟 DOM 冲突。选择官方对应生态或将 Flowbite 的视觉层包装为受控组件，明确 open、selected、disabled 和 validation 的状态来源。

互动组件逐项测试可访问性

• Modal 打开后的初始焦点和关闭后返回；
• Dropdown 的方向键、Esc 和点击外部；
• Tooltip 是否只依赖 hover；
• Datepicker 的键盘选择与日期格式；
• 暗色主题下边框、错误与焦点对比度。

Figma 与代码用同一套令牌

设计稿中的颜色、圆角、间距和组件状态应映射到 Tailwind/Flowbite 主题，而不是设计师手工重画一套。交付时标注组件名称、变体和响应式行为；开发修改 token 后同步回设计文件，避免 Figma 只剩过时截图。

开源、Pro 与模板许可分别记录

基础组件、Pro 区块、模板和 Figma 资产并非必然使用同一许可。团队应保存采用版本、来源 URL、订单与修改说明。升级时重点检查主题导入、JavaScript API、data 属性和框架适配变化，并对关键弹层与表单做行为回归。