https://benzhub.github.io/tags/%E7%8B%80%E6%85%8B%E8%AE%8A%E9%AB%94/Recent content in 狀態變體 on BenzHubHugozh-TWTue, 25 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/025-state-variants/Tue, 25 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/025-state-variants/<blockquote> <p>上一篇我們讓版面「隨螢幕大小伸縮」,但一個真正好用的介面還有另一半靈魂:<strong>同一個按鈕</strong>,滑鼠移上去要變色、按下去要凹陷、鍵盤 focus 時要有外框、被禁用時要變灰。這一篇 <strong>TailwindCSS</strong> 的狀態變體(State Variants),要用 <code>hover:</code>、<code>focus:</code>、<code>active:</code>、<code>disabled:</code> 這組互動與表單前綴,加上 <code>group-*</code>(父子連動)、<code>peer-*</code>(兄弟連動),以及 <strong>v4</strong> 新增的 <code>has-*</code>(父依子)、<code>not-*</code>、<code>in-*</code> 與 <code>aria-*</code>/<code>data-*</code> 屬性變體,讓<strong>介面隨著使用者的每一個動作活起來</strong>。</p> </blockquote>