表單 on BenzHubhttps://benzhub.github.io/tags/%E8%A1%A8%E5%96%AE/Recent content in 表單 on BenzHubHugozh-TWThu, 03 Sep 2026 00:00:00 +0000表單模式:input/驗證/自訂 checkbox 的優雅寫法 | TailwindCSS 完整教學https://benzhub.github.io/post/tailwindcss/034-form-patterns/Thu, 03 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/034-form-patterns/<blockquote> <p><strong>表單(Form)</strong> 是最考驗一致性的 UI——原生元素在各瀏覽器長得七零八落,狀態(focus/disabled/invalid)又多。這一篇用 <strong>TailwindCSS</strong> 把 <code>input</code>、<code>textarea</code>、<code>select</code>、<code>checkbox</code>、<code>radio</code> 一路樣式化,搭配 <code>@tailwindcss/forms</code> plugin 重置預設外觀,再用 <code>focus:</code>、<code>disabled:</code>、<code>user-invalid:</code> 等狀態變體與 <code>accent-color</code> 做出優雅又<strong>無障礙</strong>的驗證回饋 UI。</p> </blockquote>