它就像 Tailwind CSS v1.5，但现在增加了动画支持、overscroll 工具等等！
这里不应该有任何破坏性更改，但上次也是这么想的。如果我确实破坏了某些东西，第一个报告的人将获得一件 Tailwind 衬衫。
新功能
动画支持
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 上讨论 →