{
  "id": "review-ai-generated-tailwind-ui",
  "type": "checklists",
  "category": "checklists",
  "locale": "zh",
  "url": "/zh/checklists/review-ai-generated-tailwind-ui",
  "title": "AI生成的Tailwind UI审查清单",
  "description": "由AI编程工具生成的Tailwind CSS UI组件的人工审查清单——包括无障碍、响应式、深色模式和清除安全。",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "Astro",
    "TypeScript",
    "Tailwind"
  ],
  "tags": [
    "tailwind",
    "review",
    "typescript",
    "astro",
    "nextjs"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "AI生成的Tailwind组件在截图中看起来正确，但在小屏幕、键盘导航、减少动画和深色模式下会失效。这些问题直到用户遇到时才被发现。\n\n## 正确性\n\n```txt\n[ ] Classes exist in the installed Tailwind version — v3 and v4 class names differ\n[ ] Arbitrary values use valid CSS (e.g. w-[320px] not w-[320]) — unitless pixel values are invalid\n[ ] Responsive prefixes (sm:, md:, lg:, xl:) are used mobile-first — base styles target mobile\n[ ] Dark mode classes use dark: prefix and the project's darkMode config (class vs media)\n[ ] Container has max-width and horizontal padding — bare container class has no padding by default\n[ ] Flex and grid children do not overflow their parents on small screens\n[ ] Text truncation (truncate) is applied to the element, not a parent without overflow-hidden\n[ ] Dynamic class names are complete strings — no string interpolation like `text-${color}-500` (purged)\n[ ] Arbitrary class values that use CSS variables are declared in the CSS or Tailwind config\n[ ] No duplicate conflicting classes on the same element (e.g. text-sm and text-lg together)\n[ ] ring and outline classes are not both removed on focus — at least one must remain for keyboard users\n[ ] border-radius on parent clips children — add overflow-hidden if rounded corners should clip content\n```\n\n## 无障碍\n\n```txt\n[ ] Interactive elements are focusable and have a visible focus ring — do not use outline-none without a replacement\n[ ] Buttons and links have descriptive accessible labels — not just an icon with no aria-label\n[ ] Icon-only buttons have aria-label or aria-labelledby\n[ ] Color contrast meets WCAG AA — 4.5:1 for text, 3:1 for large text and UI components\n[ ] Text color is not the only indicator of meaning — do not rely on red/green alone\n[ ] sr-only is used for screen-reader-only labels, not hidden (which removes from accessibility tree)\n[ ] Images have meaningful alt text — not empty alt=\"\" unless truly decorative\n[ ] Modal dialogs trap focus and restore it on close — check for focus-trap implementation\n[ ] Skeleton loaders have aria-busy=\"true\" and a descriptive aria-label\n[ ] Disabled states use the disabled attribute on form elements, not just pointer-events-none\n[ ] Animated elements respect prefers-reduced-motion — add motion-reduce: variants\n[ ] Skip-to-content link is present and is the first focusable element on the page\n```\n\n## 响应式\n\n```txt\n[ ] Layout does not break at 320px viewport width (minimum supported mobile width)\n[ ] Horizontal scrollbar is not introduced at any common breakpoint\n[ ] Navigation collapses to a hamburger or similar pattern below md: breakpoint\n[ ] Tables are scrollable horizontally on mobile — not truncated or overflowing\n[ ] Font sizes are readable on mobile — minimum 16px (text-base) for body text\n[ ] Touch targets are at least 44x44px — small icon buttons need padding added\n[ ] Fixed-position elements (headers, modals) do not cover content on small screens\n[ ] Image aspect ratios are maintained at all breakpoints — use aspect-ratio utilities\n```\n\n## 深色模式\n\n```txt\n[ ] All text, background, and border colors have dark: variants\n[ ] SVG icons with hardcoded fill colors have dark: fill variants or use currentColor\n[ ] Box shadows are softened or removed in dark mode — dark:shadow-none where appropriate\n[ ] Images with white backgrounds have dark:invert or are replaced with dark-mode variants\n[ ] Third-party embeds (maps, charts) are dark-mode compatible or wrapped with a light-mode override\n```\n\n## AI特有风险\n\n```txt\n[ ] AI has not used Tailwind v2 classes removed in v3 (e.g. transform, filter, ring-opacity-*)\n[ ] AI has not used Tailwind v3 classes that changed in v4 — review the v4 upgrade guide\n[ ] AI has not used class: directive syntax from Svelte in a React/Astro project\n[ ] Dynamic class strings built with template literals are safelisted in tailwind.config.js\n[ ] AI has not assumed cn() or clsx() is available without the package being installed\n[ ] AI-generated component does not import from @headlessui/react if the project uses a different component library\n[ ] No inline styles mixed with Tailwind classes for the same property — one source of truth\n[ ] AI has not added conflicting Tailwind plugins (e.g. typography and custom prose overrides)\n```\n\n## 修复提示\n\n```txt title=\"Fix Prompt\"\nReview this Tailwind component against the checklist above. Fix any missing\ndark: variants, inaccessible focus styles, non-mobile-first responsive classes,\nand dynamic class strings that will be purged. Add aria-label to all icon-only\ninteractive elements and ensure color contrast meets WCAG AA. Return the\ncorrected component only.\n```"
}