它就像 Tailwind CSS v1.5，只是現在加入了動畫支援、overscroll 工具，以及更多功能！
這裡應該沒有任何破壞性變更，但我上次也這麼認為上次。如果我確實破壞了什麼，第一個回報的人可以獲得一件 Tailwind T 恤。
新功能
動畫支援
Tailwind CSS v1.6 加入了一個全新的 animation 核心外掛程式，內建包含了 4 種通用動畫
animate-spinanimate-pinganimate-pulseanimate-bounce
<button type="button" class="bg-indigo-600 ..." disabled> <svg class="mr-3 h-5 w-5 animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> Processing</button>這些都可以像往常一樣完全自訂，使用 tailwind.config.js 主題的 animation 和 keyframes 區段
module.exports = { theme: { extend: { animation: { wiggle: "wiggle 1s ease-in-out infinite", }, keyframes: { wiggle: { "0%, 100%": { transform: "rotate(-3deg)" }, "50%": { transform: "rotate(3deg)" }, }, }, }, },};若要取得更多資訊和即時展示，請閱讀新的動畫文件。若要了解設計原理幕後的詳細資訊，請查看 pull request。
新的 prefers-reduced-motion 變體
為了配合新的動畫功能，我們也加入了新的 motion-safe 和 motion-reduce 變體，讓您可以根據 prefers-reduced-motion 媒體功能有條件地套用 CSS。
這些與轉場和動畫工具一起使用時非常有用，可以為對動作敏感的使用者停用有問題的動作
<div class="transition duration-150 ease-in-out motion-reduce:transition-none ... ..."></div>...或是明確選擇加入動作，以確保只顯示給沒有選擇退出動作的使用者
<div class="duration-150 ease-in-out motion-safe:transition ... ..."></div>這些可以與響應式變體和偽類變體組合使用
<!-- With responsive variants --><div class="sm:motion-reduce:translate-y-0"></div><!-- With pseudo-class variants --><div class="motion-reduce:hover:translate-y-0"></div><!-- With responsive and pseudo-class variants --><div class="sm:motion-reduce:hover:translate-y-0"></div>這些目前預設未啟用任何工具，但您可以在 tailwind.config.js 檔案的 variants 區段中根據需要啟用它們
module.exports = { // ... variants: { translate: ["responsive", "hover", "focus", "motion-safe", "motion-reduce"], },};若要取得更多詳細資訊，請查看更新後的變體文件。
新的 overscroll-behavior 工具
我們也為 overscroll-behavior 屬性加入了新的工具。
您可以使用這些工具來控制網站中「滾動鏈」的運作方式，並避免在您到達嵌入式可滾動區域的頂端或底部時滾動整個頁面。
<div class="overscroll-y-contain ..."> <!-- ... --></button>請注意，目前 Safari 不支援此功能，但在我認為將此功能視為漸進式增強功能並不會有太大的問題，因為它會相當優雅地降級。
此外掛程式可以在您的 tailwind.config.js 檔案中設定為 overscrollBehavior
module.exports = { // ... // Disabling the plugin corePlugins: { overscrollBehavior: false, }, // Customizing the enabled variants variants: { overscrollBehavior: ["responsive", "hover"], },};產生您的 CSS 而無需輸入檔案
如果您從未編寫任何自訂 CSS，而且您已經厭倦了每次都建立這個檔案...
@tailwind base;@tailwind components;@tailwind utilities;...那麼我有好消息要告訴您，寶貝 – 如果您使用我們的 tailwindcss CLI 工具，您可以開始將這 58 個字元存入您的儲蓄帳戶，而不是將它們浪費在無意義的 CSS 檔案上。
現在 CLI 工具中的輸入檔案參數是選填的，因此如果您實際上不需要自訂 CSS 檔案，您可以直接寫這個
npx tailwindcss build -o compiled.css您的孩子會非常感謝您能夠一起度過的額外時間。
想討論這篇文章嗎？ 在 GitHub 上討論 →