它类似于 Tailwind CSS v1.5，只不过现在它支持动画、滚动工具等等！
🌐 It's like Tailwind CSS v1.5 except now there's animation support, overscroll utilities, and more!
这里本不应该有任何破坏性更改，但我上次也这么想过。如果我真的弄坏了什么，第一个报告的人将得到一件 Tailwind T 恤。
🌐 There aren't supposed to be any breaking changes here, but I thought that last time too. If I did break something, first person to report it gets a Tailwind shirt.
新功能(New features)
动画支持(Animation support)
Tailwind CSS v1.6 增加了一个全新的 animation 核心插件，开箱即用包含了 4 个通用动画：
🌐 Tailwind CSS v1.6 adds a brand new animation core plugin, with 4 general purpose animations included out of the box:
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 部分：
🌐 These are completely customizable as always, using the animation and keyframes sections of your tailwind.config.js theme:
module.exports = { theme: { extend: { animation: { wiggle: "wiggle 1s ease-in-out infinite", }, keyframes: { wiggle: { "0%, 100%": { transform: "rotate(-3deg)" }, "50%": { transform: "rotate(3deg)" }, }, }, }, },};有关更多信息和实时演示，请阅读新的动画文档。有关设计原理的幕后细节，请查看拉取请求。
🌐 For more information and a live demo, read the new animation documentation. For behind the scenes details about the design rationale, check out the pull request.
新的 prefers-reduced-motion 变种(New prefers-reduced-motion variants)
为了配合新的动画功能，我们还添加了新的 motion-safe 和 motion-reduce 变体，使你能够根据 prefers-reduced-motion 媒体特性 有条件地应用 CSS。
🌐 To go along with the new animation features, we've also added new motion-safe and motion-reduce variants that allow you to conditionally apply CSS based on the prefers-reduced-motion media feature.
这些功能可以与过渡和动画工具结合使用，为对动画敏感的用户禁用有问题的动效：
🌐 These can be useful in conjunction with transition and animation utilities to disable problematic motion for users who are sensitive to it:
<div class="transition duration-150 ease-in-out motion-reduce:transition-none ... ..."></div>...或者明确选择启用动效，以确保它只显示给未选择禁用的用户：
<div class="duration-150 ease-in-out motion-safe:transition ... ..."></div>这些功能也可以与响应式变体和伪类变体结合使用：
🌐 These can be combined with responsive variants and pseudo-class variants as well:
<!-- 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 部分启用它们：
🌐 These are currently not enabled for any utilities by default, but you can enabled them as needed in the variants section of your tailwind.config.js file:
module.exports = { // ... variants: { translate: ["responsive", "hover", "focus", "motion-safe", "motion-reduce"], },};欲了解更多详情，请查看更新后的变体文档。
🌐 For more details, check out the updated variants documentation.
新的 overscroll-behavior 工具(New overscroll-behavior utilities)
我们还为 overscroll-behavior 属性添加了新的实用工具。
🌐 We've also added new utilities for the overscroll-behavior property.
你可以使用这些工具来控制网站中“滚动链”的工作方式，并在达到嵌入的可滚动区域的顶部或底部时避免滚动整个页面。
🌐 You can use these utilities to control how "scroll chaining" works in your sites, and avoid scrolling the whole page when you reach the top or bottom of an embedded scrollable area.
<div class="overscroll-y-contain ..."> <!-- ... --></button>请注意，目前 Safari 不支持 这一功能，但在我看来，把它作为一种渐进增强来处理并不是大问题，因为它会比较优雅地回退。
🌐 Note that this is currently not supported in Safari, but in my opinion it's not a huge deal to treat this as a progressive enhancement anyways, since it falls back fairly gracefully.
此插件可以在你的 tailwind.config.js 文件中配置为 overscrollBehavior ：
🌐 This plugin can be configured in your tailwind.config.js file as overscrollBehavior:
module.exports = { // ... // Disabling the plugin corePlugins: { overscrollBehavior: false, }, // Customizing the enabled variants variants: { overscrollBehavior: ["responsive", "hover"], },};无需输入即可生成 CSS 文件(Generate your CSS without an input file)
如果你从未编写过任何自定义 CSS，并且厌倦了每次都创建这个文件……
🌐 If you never write any custom CSS and you're sick of creating this file all the time...
@tailwind base;@tailwind components;@tailwind utilities;...那么宝贝，我有个消息要告诉你——如果你正在使用我们的 tailwindcss 命令行工具，你可以开始把那 58 个字符存进你的储蓄账户，而不是浪费在一个没用的 CSS 文件上。
在 CLI 工具中，输入文件参数现在是可选的，所以如果你实际上不需要自定义 CSS 文件，你可以直接这样写：
🌐 The input file argument is now optional in the CLI tool, so if you don't actually need a custom CSS file, you can just write this:
npx tailwindcss build -o compiled.css你的子级会非常感激你能抽出时间陪伴他们。
🌐 Your kids are going to be so grateful for the extra time you get to spend together.
想讨论这篇文章吗？ 在 GitHub 上讨论 →