它就像 Tailwind CSS v1.5，只不过现在支持动画、超滚动工具等更多功能！
这里应该没有重大更改，但我也以为 上次 也是。如果我 确实 破坏了什么，第一位报告的人将获得一件 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 ..."> <!-- ... --></button>请注意，目前 不支持 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 上讨论 →