AI 工具指南
Codex/Deep guide

Codex Tailwind Mobile Check

给 AI 工具新手的一套 Tailwind 移动端样式检查流程：用 Codex 辅助定位类名和布局风险，但由人工确认真实视口、溢出、按钮、导航、表单和截图证据。

What is the problem?

给 AI 工具新手的一套 Tailwind 移动端样式检查流程：用 Codex 辅助定位类名和布局风险，但由人工确认真实视口、溢出、按钮、导航、表单和截图证据。

Quick solution

Treat this as a Codex tutorial issue. First confirm the environment, inputs, permissions, logs, and delivery boundary. Then use the linked deep guide for the full checklist before changing production code or promising a result.

Read the deep guide

Detailed steps

  1. 先复现问题。记录页面路径、设备或视口宽度、浏览器、截图和客户原话。不要只写“移动端不对”。
  2. 确认影响范围。判断是单个页面、单个组件，还是全站导航、卡片、表单等共享部分。
  3. 让 Codex 读 class。可以要求它只指出可能导致溢出、固定宽度、错位或遮挡的 class，不要直接大改组件。
  4. 检查断点逻辑。看默认样式是否先适配小屏，再用 `sm:`、`md:`、`lg:` 往上增强。很多新手反过来写，导致手机继承桌面布局。
  5. 检查可点击区域。按钮、菜单、表单输入框不要太小，文字不要贴边，CTA 不要被 sticky 元素遮挡。
  6. 检查内容极端值。长标题、长邮箱、价格表、多行按钮、客户 logo、不同图片比例都要看。只有短文案通过不算完整验证。

Commands or code

请检查这个 Tailwind 组件的移动端风险。
先不要重写代码，只列出可能导致横向滚动、遮挡、固定宽度、按钮过小或内容溢出的 class。
请说明每个风险需要在哪些视口验证。

Risk notes

Confirm the real project environment, account permissions, platform rules, and output quality before delivery. Do not ship AI-generated changes without human review, and do not claim indexing, income, deployment success, or ranking improvements without measured evidence.