Tailwind CSS 原子类精炼与组件拆解规范
向千问AI提交自然语言界面需求时，建议按照“容器基础骨架 → 排版间距层级 → 交互状态伪类 → 主题变量适配”四个步骤组织描述：
# 推荐的高精度提示词示范：
"请用 React + Tailwind CSS 编写一个通知消息浮层：
1. 容器宽度固定为 360px，背景为纯白并在暗黑模式下自动切换为 neutral-900；
2. 左侧图标使用相对绝对居中，右侧包含标题与正文两行文字，单行溢出显示省略号；
3. 使用 clsx 或 tailwind-merge 防止外部传入的 className 与默认 padding 发生样式冲突；
4. 加入 hover 时的微小阴影提升与关闭按钮点击触发回调。"
"请用 React + Tailwind CSS 编写一个通知消息浮层：
1. 容器宽度固定为 360px，背景为纯白并在暗黑模式下自动切换为 neutral-900；
2. 左侧图标使用相对绝对居中，右侧包含标题与正文两行文字，单行溢出显示省略号；
3. 使用 clsx 或 tailwind-merge 防止外部传入的 className 与默认 padding 发生样式冲突；
4. 加入 hover 时的微小阴影提升与关闭按钮点击触发回调。"
通过明确的声明，千问AI将自动避免冗余类名的堆砌，并使用 group-hover: 与 focus-visible: 补全标准无障碍交互。
