就像 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> 处理中</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)" }, }, }, }, },};有关更多信息和实时演示，请阅读新的动画文档。有关设计原理的幕后细节，请查看拉取请求。
新的 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>这些也可以与响应式变体和伪类变体结合使用：
<!-- 使用响应式变体 --><div class="sm:motion-reduce:translate-y-0"></div><!-- 使用伪类变体 --><div class="motion-reduce:hover:translate-y-0"></div><!-- 使用响应式和伪类变体 --><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 ..."> <!-- ... --></div>请注意，这目前不支持 Safari，但在我看来，将其视为渐进增强并不是一个大问题，因为它的回退相当优雅。
可以在 tailwind.config.js 文件中将此插件配置为 overscrollBehavior：
module.exports = { // ... // 禁用插件 corePlugins: { overscrollBehavior: false, }, // 自定义启用的变体 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 上讨论 →