React + Tailwind 组件生成提示词（文字描述 → 可直接用的组件，含响应式、深色模式与无障碍）

怎么填变量：[版本] 要写清——Tailwind v4 改为在 CSS 中配置（@import "tailwindcss"; 加 @theme），默认不再需要 tailwind.config.js；v3 项目则需要在配置文件的 content 里包含组件路径，否则样式不会生成。[视觉风格描述] 写「白底卡片、圆角、浅灰边框、悬停时轻微上浮」这种可执行的描述，比「好看、高级」有效得多。

常见坑：

• AI 默认写出来的组件往往只有「正常状态」，加载、空数据、出错这几个状态要明确列在需求里。
• 用纯 div 加 onClick 做按钮，键盘无法操作，读屏软件也识别不了，要用 button 元素。
• 一次只让它做一个组件；整页需求先让它拆成组件树再逐个生成。

追问技巧：生成后追问「检查这个组件的无障碍问题，按 WCAG 列出来」；要改样式时直接描述差异，比如「卡片间距改小，标题最多显示两行，超出用省略号」。

示例输出

示例，仅供参考（带清空按钮的搜索框）

tsx
import { useId } from 'react'

type SearchBoxProps = {
  value: string
  onChange: (value: string) => void
  placeholder?: string
}

export function SearchBox({ value, onChange, placeholder = '搜索' }: SearchBoxProps) {
  const id = useId()
  return (
    <div className="relative w-full max-w-md">
      <label htmlFor={id} className="sr-only">搜索</label>
      <input
        id={id}
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-9 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
      />
      {value && (
        <button
          type="button"
          aria-label="清空搜索"
          onClick={() => onChange('')}
          className="absolute inset-y-0 right-0 flex w-9 items-center justify-center text-gray-400 hover:text-gray-600 focus-visible:text-gray-700"
        >
          ×
        </button>
      )}
    </div>
  )
}