用途:该技能面向使用 Tailwind CSS 构建后台管理面板、数据表格、CRUD 界面、后台面板或管理控制台的场景,提供可参考的设计模式与类名约定。
主要能力:
- 数据表格:简单表格、复选框选择、排序、斑马纹、固定表头、可展开行、头像列、紧凑与响应式布局;含包装容器、表头、单元格、操作列等类名,以及列隐藏、横向滚动、堆叠卡片等响应式策略。
- CRUD 布局:新增/编辑用模态框或滑出抽屉,读取用详情区或只读抽屉,更新支持表单或行内编辑,删除需确认弹窗;含批量操作栏与空状态。
- 筛选与搜索:表格标题搜索框、下拉筛选、侧边分面、行内筛选、筛选标签、日期范围;规定 300ms 防抖、保留筛选、清除按钮与筛选计数徽标。
- 仪表盘导航:顶部导航栏、侧边栏、可折叠分组、徽标计数,以及固定侧栏、可折叠侧栏、移动端抽屉、顶部加侧边组合、面包屑与选项卡等变体。
- 表单模式:模态框与抽屉表单布局、行内编辑、多步骤表单(步进器与连接线)。
- 反馈与状态:状态徽标配色、成功横幅自动消失、删除确认弹窗(可选输入实体名确认)、批量操作反馈。
- 仪表盘布局:统计卡片、活动流、快捷操作。
- 表格页脚与分页:页码、截断页码、仅上一页/下一页、加载更多、无限滚动,以及每页条数选择器。
- 抽屉/滑出:窄、中、宽、全宽变体,以及读取、创建、更新三类抽屉结构与过渡动画类。
- 常见反模式提示。
使用方式:作为 Tailwind CSS 项目编写后台界面时的模式参考,直接套用文中列出的类名组合;基础 Tailwind 模式参见 tailwind-guidelines。
适用场景:管理后台、数据密集型表格、增删改查页面、后台控制台。
限制:资料未提供安装命令、代码运行环境、框架绑定、价格或效果保证,具体实现需自行判断。