Tailwind CSS v1.6.0

它就像 Tailwind CSS v1.5，只是现在增加了动画支持、滚动溢出实用程序等等！

这里不应该有任何重大更改，但我认为上次也是这样。如果我确实破坏了什么，第一个报告的人将获得一件 Tailwind 衬衫。

​新功能

​动画支持

Tailwind CSS v1.6 添加了一个全新的animation核心插件，其中包含 4 个开箱即用的通用动画

• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." 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)' },
        },
      },
    },
  },
}

有关更多信息和实时演示，请阅读新的动画文档。有关设计原理的幕后细节，请查看拉取请求。

​新的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="... motion-safe:transition duration-150 ease-in-out ..."></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 上讨论 →