TailwindCSS 路线 04：表单与状态——输入框、校验、禁用、加载一套打完

这篇要做的事情很具体：把表单组件做成“团队可复用的标准件”。

你会发现表单之所以难，不是因为样式难，而是因为状态太多：

• 默认 / hover / focus
• error（校验失败）
• disabled（禁用）
• loading（提交中）
• dark（暗色）

01 目标与验收#

目标：做出一套 Input 体系（至少包含 Input + Label + HelpText + ErrorText）。

验收：

• focus 有清晰可访问的 focus ring
• error 状态不仅变红，还能通过文案说明问题
• disabled 不可点击、颜色更淡、光标正确
• dark 模式下对比度仍然足够

02 一套“可落地”的表单 Token#

你可以沿用全站变量（推荐）：

• --border：默认边框
• --focus-ring：聚焦外圈（建议用半透明 accent）
• --surface：输入框底色
• --accent：强调色

error 建议固定为红系（不要每个组件自选）：

• 边框：border-rose-500/70
• 文案：text-rose-600（暗色用 text-rose-300）

03 Input 的基类（建议作为“规范”）#

下面这套 class 你可以直接拿去当作 Input 的 base：

const inputBase =
  "w-full rounded-2xl border bg-[var(--surface)] px-4 py-3 text-sm " +
  "text-stone-900 placeholder:text-stone-400 " +
  "transition-colors " +
  "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--focus-ring)] " +
  "disabled:cursor-not-allowed disabled:opacity-60 " +
  "dark:text-stone-100 dark:placeholder:text-stone-500";

然后把边框与 error 分开：

const inputBorder = "border-[var(--border)]/80 hover:border-[var(--border)]";
const inputError =
  "border-rose-500/70 hover:border-rose-500 focus-visible:ring-rose-500/20";

04 练习：做一个“登录表单”#

做一个最常见的登录：

• 邮箱
• 密码
• 记住我（checkbox）
• 提交按钮（loading）

要求：

• error 时输入框和提示文案一致
• 提交中按钮禁用且显示 loading
• 键盘 Tab 顺序正确
• label 用 <label htmlFor> 关联 input（可访问性）

05 小结#

表单组件做得好，后面写业务页面会非常快，因为你只是在“拼装标准件”。下一篇我们解决长文排版：当你的内容是 Markdown、文档、说明页时，Tailwind + Typography 插件怎么用最舒服。