第三章：组件开发实战 - 第二节 - Tailwind CSS 表单元素样式处理

<input type="text"
       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
       placeholder="请输入用户名"
/>

<div class="relative">
    <select class="w-full px-4 py-2 border border-gray-300 rounded-lg appearance-none bg-white pr-8 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        <option value="">请选择</option>
        <option value="1">选项一</option>
        <option value="2">选项二</option>
    </select>
    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M19 9l-7 7-7-7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
        </svg>
    </div>
</div>

<label class="flex items-center space-x-2 cursor-pointer">
    <input type="checkbox" class="hidden peer"/>
    <div class="w-5 h-5 border border-gray-300 rounded flex items-center justify-center peer-checked:bg-blue-500 peer-checked:border-blue-500 transition-colors">
        <svg class="w-3 h-3 text-white hidden peer-checked:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
        </svg>
    </div>
    <span class="text-gray-700">记住我</span>
</label>

<div class="flex space-x-4">
    <label class="flex items-center space-x-2 cursor-pointer">
        <input type="radio" name="size" value="small" class="hidden peer"/>
        <div class="w-4 h-4 border border-gray-300 rounded-full flex items-center justify-center peer-checked:border-blue-500">
            <div class="w-2 h-2 rounded-full bg-blue-500 hidden peer-checked:block"></div>
        </div>
        <span class="text-gray-700">小号</span>
    </label>
    <!-- 更多选项 -->
</div>

<label class="block">
    <span class="sr-only">选择文件</span>
    <input type="file" class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-blue-50 file:text-blue-700
hover:file:bg-blue-100
"/>
</label>

<div class="space-y-2">
    <input
            type="email"
            class="w-full px-4 py-2 border rounded-lg transition-colors
aria-[invalid=true]:border-red-500
aria-[invalid=true]:text-red-600
focus:outline-none"
            aria-invalid="true"
    />
    <p class="text-sm text-red-500">请输入有效的邮箱地址</p>
</div>

<button
        type="submit"
        class="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
        disabled
>
<span class="flex items-center space-x-2">
<svg class="animate-spin h-5 w-5" viewBox="0 0 24 24"><!-- 加载图标 SVG --></svg>
<span>提交中...</span>
</span>
</button>

<form class="space-y-6">
    <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700">用户名</label>
        <input type="text" class="form-input"/>
    </div>
    <!-- 更多表单字段 -->
</form>

module.exports = {
    theme: {
        extend: {
// ...
        }
    },
    plugins: [
        function ({addComponents}) {
            addComponents({
                '.form-input': {
                    '@apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors': {}
                },
// 更多复用样式...
            })
        }
    ]
}

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="space-y-2">
        <label>姓</label>
        <input type="text" class="form-input"/>
    </div>
    <div class="space-y-2">
        <label>名</label>
        <input type="text" class="form-input"/>
    </div>
</div>