https://benzhub.github.io/tags/%E6%8C%87%E4%BB%A4/Recent content in 指令 on BenzHubHugozh-TWWed, 05 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/005-directives-functions/Wed, 05 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/005-directives-functions/<blockquote> <p>在 <strong>TailwindCSS</strong> v4 裡，指令（directives）與函式（functions）是你在 CSS 檔案裡「動用」設計系統的工具箱。從一行 <strong><code>@import &quot;tailwindcss&quot;</code></strong> 載入整套框架，到用 <strong><code>@layer</code></strong> 控制優先級、<strong><code>@apply</code></strong> 提取 utility、<strong><code>@utility</code></strong> 定義自訂 utility、<strong><code>@custom-variant</code></strong> 造出新變體，再到 <code>theme()</code>、<code>--alpha()</code>、<code>--spacing()</code> 這些函式取用 Token——這篇是 <strong>TailwindCSS 完整教學</strong> 系列的第五篇，帶你一次看懂 v4 的指令與函式語彙，並標註它與 v3 的關鍵差異。</p> </blockquote>