Tailwind CSS v1.5.0

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

没有重大更改，这是一个次要版本，我们都是专业人士，你个傻瓜。

新功能

在 Tailwind CSS v1.5.0 之前，只有“实用程序”类真正打算与variants一起使用（例如“响应式”、“悬停”、“焦点”等）。

虽然这些对于实用程序类比任何其他类型的类更有用，但我们现在也支持为组件类生成变体，例如新@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 您的样式属于“组件”桶。

@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` 等。

tailwind.config.js

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

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

这对于添加仅对键盘用户显示的焦点样式非常有用，而对于鼠标用户则会被忽略。

<button class="focus-visible:outline-none focus-visible:shadow-outline ...">
  Click me
</button>

默认情况下它不会为任何内容启用，但您可以在配置文件的 `variants` 部分中启用它。

tailwind.config.js

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

浏览器对它的支持仍然很弱，但正在改善。同时，如果您想立即在所有浏览器中使用它，请查看 polyfill 和相应的 PostCSS 插件。

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

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

默认情况下它不会为任何内容启用，但您可以在配置文件的 `variants` 部分中启用它。

tailwind.config.js

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

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