2020 年 7 月 15 日

Tailwind CSS v1.5.0

Adam Wathan

我原本希望将 v1.5.0 保留用于一些真的令人兴奋的内容，但我们需要一个新特性来支持新的 @tailwindcss/typography 插件，所以我们决定提前给你们带来一些新东西。

没有破坏性更改，这是一个小版本发布，我们是专业人士，你个傻瓜。

新特性

在 Tailwind CSS v1.5.0 之前，只有“工具类”被真正意图与 variants 一起使用（如“响应式”、“悬停”、“聚焦”等）。

虽然这些类对于工具类依然比其他类型的类更有用，但现在我们也支持为组件类生成变体，例如新的 @tailwindcss/typography 插件中的 prose 类：

<article class="prose md:prose-lg">
  <!-- 内容 -->
</article>

您可以通过在 addComponents 插件 API 的第二个参数中使用新的 variants 选项，利用您自己组件类中的此特性：

plugin(function ({ addComponents }) {
  addComponents({
    '.card': {
      // ...
    }
  }, {
    variants: ['responsive']
  })
})

...或者使用您可能熟悉的 addUtilities API 的数组简写：

plugin(function ({ addComponents }) {
  addComponents({
    '.card': {
      // ...
    }
  }, ['responsive'])
})

要在自定义 CSS 中利用这些功能（而不是使用插件 API），您可以使用新的 @layer 指令，明确告诉 Tailwind 您的样式属于“组件”类别：

@layer components {
  @responsive {
    .card {
      /* ... */
    }
  }
}

这有助于 Tailwind 正确清除您的未使用 CSS，确保在使用默认的“保守”清除模式时不会移除任何响应式组件变体。

在新的组件 variants 支持的基础上，container 类现在支持变体！

<!-- 仅在 `md` 尺寸及以上锁定宽度 -->
<div class="md:container">
  <!-- ... -->
</div>

我们默认启用了响应式变体，但如果您头脑不清晰，您还可以手动启用其他变体，如 focus、group-hover 等：

module.exports = {
  // ...
  variants: {
    container: ["responsive", "focus", "group-hover"],
  },
};

我们增加了对 :focus-visible 伪类的支持，使用了新的 focus-visible 变体。

这对于添加只对键盘用户可见的聚焦样式非常有用，而鼠标用户将忽略它：

<button class="focus-visible:shadow-outline focus-visible:outline-none ...">点击我</button>

默认情况下未为任何内容启用，但您可以在配置文件的 variants 部分启用它：

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "focus-visible"],
  },
};

浏览器对这一点的支持仍然较弱，但正在改善。在此期间，如果您希望立即在所有浏览器中使用此功能，请查看 polyfill 和相应的 PostCSS 插件。

我们添加了一个新的 checked 变体，您可以用它来有条件地样式化复选框和单选按钮等元素：

<input type="checkbox" class="bg-white checked:bg-blue-500" />

默认情况下未为任何内容启用，但您可以在配置文件的 variants 部分启用它：

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "checked"],
  },
};

想讨论这篇文章吗？在 GitHub 上讨论 →