表单是网页中最常见的元素之一。默认情况下，很多表单元素的外观都是比较丑的，对用户体验影响很大。在 Tailwind CSS 中，我们只需要使用表单相关的类名，就可以轻松实现美观的表单效果了。
Tailwind CSS 表单类名
在 Tailwind CSS 中，表单相关类名主要用于取消默认外观、设置边框以及处理聚焦状态等方面。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| outline-none | outline: 2px solid transparent; | 取消默认的 outline 边框 |
| appearance-none | appearance: none; | 取消原生组件样式（常用于自定义下拉框或复选框） |
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| focus:border-* | border-color: ...; | 聚焦时，改变边框颜色 |
| focus:ring-* | box-shadow: ...; | 聚焦时，生成光晕效果 |
| focus:ring-offset-2 | padding: 2px; | 光晕与边框之间留一条白边 |
Tailwind CSS 表单示例
接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来定义表单效果。
示例 1：带光晕的搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-full max-w-sm">
<input type="text" placeholder="搜索绿叶网..." class="w-full px-4 py-2 border border-gray-300 rounded-lg outline-none focus:border-green-500 focus:ring-4 focus:ring-green-100 transition-all">
</div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当搜索框聚焦时，页面效果如下图 2 所示。
分析：
首先，我们使用 “outline-none” 这个类名来去掉文本框自带的默认外框。然后使用 “focus:ring-4 focus:ring-green-100” 来定义当用户点击输入框时，外围会出现一圈半透明的绿色光晕效果。
示例 2：意见反馈表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 bg-gray-100">
<form class="max-w-md mx-auto bg-white p-8 rounded-2xl shadow-sm">
<h2 class="text-xl font-bold mb-6">意见反馈</h2>
<div class="space-y-4">
<input type="email" placeholder="邮箱地址" class="w-full px-4 py-2 border border-gray-200 rounded-lg outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500">
<textarea placeholder="你的建议..." rows="4" class="w-full px-4 py-2 border border-gray-200 rounded-lg outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500"></textarea>
<label class="flex items-center cursor-pointer group">
<input type="checkbox" class="w-4 h-4 accent-green-500 border-gray-300 rounded focus:ring-green-500">
<span class="ml-2 text-sm text-gray-500 group-hover:text-gray-700">同意绿叶网《用户协议》</span>
</label>
<button type="submit" class="w-full py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600 transition-colors cursor-pointer">
提交
</button>
</div>
</form>
</body>
</html>默认情况下，页面效果如下图 1 所示。当文本框聚焦时，页面效果如下图 2 所示。
分析：
在这个综合案例中，我们统一了所有的聚焦颜色。“focus:ring-green-500/20” 后面的 “/20” 表示 20% 的不透明度，这样可以让光晕看起来更轻盈、更高级。
表单的 “提示状态” 与 “禁用状态”
当用户点击 “提交” 按钮后，为了防止他们重复点击，我们通常会将按钮设置为 disabled（禁用）状态。同时，为了让输入框的提示文字（placeholder）在聚焦时变得更柔和，我们可以结合相关的状态修饰符。
语法：
placeholder:*
disabled:*说明：
针对占位符使用的是 placeholder:*。而针对禁用状态使用的是 disabled:*。
示例 3：表单的交互状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="max-w-md mx-auto space-y-6">
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">邮箱</label>
<input
type="text"
placeholder="请输入您的邮箱"
class="w-full px-4 py-2 border rounded-lg outline-none placeholder-gray-300 focus:placeholder-transparent focus:ring-2 focus:ring-green-500"
>
</div>
<div>
<button
disabled
class="w-full py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-green-500 transition-colors"
>
正在提交中...
</button>
</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在输入框中，focus:placeholder-transparent 是一个非常有用的小技巧，当用户点击输入框准备打字时，提示文字会瞬间消失，视觉体验极佳。
在按钮中，当 HTML 标签带有 disabled 属性时，Tailwind CSS 中的 disabled:* 修饰符就会生效，瞬间让按钮半透明（opacity-50）并且鼠标变成禁止图标（cursor-not-allowed）。
常见问题
1. 为什么我的 checkbox 勾选之后还是蓝色的，怎么改为绿色呢？
原生复选框的内部颜色受浏览器限制非常多。但在 Tailwind CSS 中，我们可以直接使用 accent-{color} 类名（如 accent-green-500）来轻松修改它，这在底层调用的是 CSS 原生的 accent-color 属性。
2. 文本框聚焦时，周围那个蓝色的框怎么都去不掉呢？
首先我们检查一下是否忘记设置了 outline-none。默认情况下，大多数浏览器（尤其是 Chrome）会在元素聚焦时强行加上一个辅助外框。
