审查生成的 Tailwind 操作按钮

Tailwind CSS 4.3.3 高级 12分钟找出 4处问题

这段生成组件进入共享 UI 包之前，请进行审查。

使用可静态检测的类名和范围明确的过渡，实现包含两种有限色调、两种宽度、禁用状态与可见键盘焦点的按钮。

TSX

type Props = {
  tone: 'primary' | 'danger';
  wide?: boolean;
  disabled?: boolean;
  children: React.ReactNode;
};

export function ActionButton({ tone, wide, disabled, children }: Props) {
  const toneClass = `bg-${tone}-600 hover:bg-${tone}-700`;
  const widthClass = wide ? 'px-8' : 'px-4';

  return (
    <button
      type="button"
      disabled={disabled}
      className={`py-2 px-4 ${widthClass} ${toneClass} transition-all focus:outline-none`}
    >
      {children}
    </button>
  );
}

生成代码仅作示例，不代表任何特定模型

在试验场中打开

报告错误