https://benzhub.github.io/tags/%E5%85%83%E4%BB%B6/Recent content in 元件 on BenzHubHugozh-TWThu, 27 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/027-component-patterns/Thu, 27 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/027-component-patterns/<blockquote> <p>一路學到這裡,你已經能寫出響應式、有狀態、還會明暗切換的介面——但你八成也發現一件事:同一顆按鈕、同一張卡片的那串 <strong>utility class</strong>,在每個頁面都要再抄一遍,又臭又長還容易不一致。這篇 <strong>TailwindCSS</strong> 要解決的正是這個規模化痛點:<strong>重複的 class 該怎麼收斂?</strong> 我們會把三種抽象策略——<strong>框架元件</strong>、<code>@apply</code>、v4 的 <code>@utility</code>——攤開來對比,講清楚何時該抽象、何時該保持 utility inline,並釐清 <code>@apply</code> 的正確與濫用時機。</p> </blockquote>