https://benzhub.github.io/tags/%E4%BA%92%E5%8B%95/Recent content in 互動 on BenzHubHugozh-TWSun, 23 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/023-interactivity/Sun, 23 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/023-interactivity/<blockquote> <p>前幾篇我們把元素「排得整齊、看得漂亮」,這一篇要讓介面真正「用起來順手」。<strong>TailwindCSS</strong> 的互動性(Interactivity)工具,涵蓋 <code>cursor-*</code>(游標樣式)、<code>pointer-events-*</code>(指標事件穿透)、<code>select-*</code>(文字選取)、<code>resize-*</code>(縮放把手)、<code>scroll-smooth</code> 與 <code>snap-*</code>(滾動吸附輪播)、<code>touch-*</code>(觸控行為)、以及 v4 新增的 <code>field-sizing-content</code>(自動長高)、<code>scheme-*</code>(配色宣告)、<code>accent-*</code>(強調色)、<code>caret-*</code>(游標色)、<code>will-change-*</code>(渲染提示)與 <code>appearance-none</code>(移除原生外觀)。這一組看似瑣碎的細節工具,正是把介面從「能操作」打磨到「好操作」的關鍵——<strong>讓每一次點擊、滑動、輸入都恰到好處</strong>。</p> </blockquote>