# Checklist pour la révision de l'interface utilisateur Tailwind générée par l'IA

> Une checklist de révision humaine pour les composants d'interface utilisateur Tailwind CSS écrits par des agents de codage IA — accessibilité, réactivité, mode sombre et sécurité de purge.

**Type:** Checklist  
**Tools:** Cursor, Claude Code, Codex, Windsurf  
**Stack:** Next.js, Astro, TypeScript, Tailwind  
**Updated:** 2026-06-08

---

L'IA génère des composants Tailwind qui semblent corrects sur les captures d'écran, mais qui échouent sur les petits écrans, la navigation au clavier, le mouvement réduit et le mode sombre. Ces lacunes sont invisibles jusqu'à ce qu'un utilisateur les rencontre.

## Exactitude

```txt
[ ] Classes exist in the installed Tailwind version — v3 and v4 class names differ
[ ] Arbitrary values use valid CSS (e.g. w-[320px] not w-[320]) — unitless pixel values are invalid
[ ] Responsive prefixes (sm:, md:, lg:, xl:) are used mobile-first — base styles target mobile
[ ] Dark mode classes use dark: prefix and the project's darkMode config (class vs media)
[ ] Container has max-width and horizontal padding — bare container class has no padding by default
[ ] Flex and grid children do not overflow their parents on small screens
[ ] Text truncation (truncate) is applied to the element, not a parent without overflow-hidden
[ ] Dynamic class names are complete strings — no string interpolation like `text-${color}-500` (purged)
[ ] Arbitrary class values that use CSS variables are declared in the CSS or Tailwind config
[ ] No duplicate conflicting classes on the same element (e.g. text-sm and text-lg together)
[ ] ring and outline classes are not both removed on focus — at least one must remain for keyboard users
[ ] border-radius on parent clips children — add overflow-hidden if rounded corners should clip content
```

## Accessibilité

```txt
[ ] Interactive elements are focusable and have a visible focus ring — do not use outline-none without a replacement
[ ] Buttons and links have descriptive accessible labels — not just an icon with no aria-label
[ ] Icon-only buttons have aria-label or aria-labelledby
[ ] Color contrast meets WCAG AA — 4.5:1 for text, 3:1 for large text and UI components
[ ] Text color is not the only indicator of meaning — do not rely on red/green alone
[ ] sr-only is used for screen-reader-only labels, not hidden (which removes from accessibility tree)
[ ] Images have meaningful alt text — not empty alt="" unless truly decorative
[ ] Modal dialogs trap focus and restore it on close — check for focus-trap implementation
[ ] Skeleton loaders have aria-busy="true" and a descriptive aria-label
[ ] Disabled states use the disabled attribute on form elements, not just pointer-events-none
[ ] Animated elements respect prefers-reduced-motion — add motion-reduce: variants
[ ] Skip-to-content link is present and is the first focusable element on the page
```

## Réactivité

```txt
[ ] Layout does not break at 320px viewport width (minimum supported mobile width)
[ ] Horizontal scrollbar is not introduced at any common breakpoint
[ ] Navigation collapses to a hamburger or similar pattern below md: breakpoint
[ ] Tables are scrollable horizontally on mobile — not truncated or overflowing
[ ] Font sizes are readable on mobile — minimum 16px (text-base) for body text
[ ] Touch targets are at least 44x44px — small icon buttons need padding added
[ ] Fixed-position elements (headers, modals) do not cover content on small screens
[ ] Image aspect ratios are maintained at all breakpoints — use aspect-ratio utilities
```

## Mode sombre

```txt
[ ] All text, background, and border colors have dark: variants
[ ] SVG icons with hardcoded fill colors have dark: fill variants or use currentColor
[ ] Box shadows are softened or removed in dark mode — dark:shadow-none where appropriate
[ ] Images with white backgrounds have dark:invert or are replaced with dark-mode variants
[ ] Third-party embeds (maps, charts) are dark-mode compatible or wrapped with a light-mode override
```

## Risques spécifiques à l'IA

```txt
[ ] AI has not used Tailwind v2 classes removed in v3 (e.g. transform, filter, ring-opacity-*)
[ ] AI has not used Tailwind v3 classes that changed in v4 — review the v4 upgrade guide
[ ] AI has not used class: directive syntax from Svelte in a React/Astro project
[ ] Dynamic class strings built with template literals are safelisted in tailwind.config.js
[ ] AI has not assumed cn() or clsx() is available without the package being installed
[ ] AI-generated component does not import from @headlessui/react if the project uses a different component library
[ ] No inline styles mixed with Tailwind classes for the same property — one source of truth
[ ] AI has not added conflicting Tailwind plugins (e.g. typography and custom prose overrides)
```

## Invite de correction

```txt title="Fix Prompt"
Review this Tailwind component against the checklist above. Fix any missing
dark: variants, inaccessible focus styles, non-mobile-first responsive classes,
and dynamic class strings that will be purged. Add aria-label to all icon-only
interactive elements and ensure color contrast meets WCAG AA. Return the
corrected component only.
```