2020 年 7 月 15 日

Tailwind CSS v1.5.0

Adam Wathan

我原本希望将 v1.5.0 版本留给一些真正令人兴奋的功能，但是我们需要一个新功能来支持新的 @tailwindcss/typography 插件，所以管他的，我们提前给你们带来一些新东西。

没有破坏性更改，这是一个次要版本，我们是专业的，你这个傻瓜。

新功能

在 Tailwind CSS v1.5.0 之前，只有“实用工具”类真正被设计用于 variants（例如“responsive”、“hover”、“focus”等）。

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

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

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

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

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

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

为了在您的自定义 CSS 中利用这些功能（而不是使用插件 API），您可以使用新的 @layer 指令来显式告诉 Tailwind 您的样式属于“components” bucket

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

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

利用新的组件 variants 支持，container 类现在支持变体了！

<!-- Only lock the width at `md` sizes and above -->
<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 ...">Click me</button>

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

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

浏览器对此的支持仍然很弱，但正在变得越来越好。在此期间，如果您想立即在所有浏览器中使用此功能，请查看 polyfill 和相应的 PostCSS plugin。

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

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

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

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

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