Tailwind CSS v1.6.0

它类似于 Tailwind CSS v1.5，只不过现在它支持动画、滚动实用程序等等！

¥It's like Tailwind CSS v1.5 except now there's animation support, overscroll utilities, and more!

这里应该没有任何重大变更，但我认为上次也是如此。如果我弄坏了什么东西，第一个报告的人将获得一件 Tailwind 衬衫。

¥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)

¥New features

动画支持(Animation support)

¥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-spin
animate-ping
animate-pulse
animate-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)

¥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>

...或者明确选择启用动效，以确保它只显示给未选择禁用的用户：

¥...or to explicitly opt-in to motion to make sure it's only being shown to users who haven't opted out:

<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)

¥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)

¥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 CLI 工具，你可以开始将这 58 个字符存入你的储蓄账户，而不是将它们浪费在毫无意义的 CSS 文件上。

¥...then I've got news for you baby — if you're using our tailwindcss CLI tool you can start depositing those 58 characters into your savings account instead of wasting them on a pointless CSS file.

输入文件参数现在在 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.

想要讨论这篇文章吗？Discuss this on GitHub →

¥Want to talk about this post? Discuss this on GitHub →