如何使用 Tailwind CSS 定位具有特定数据属性的元素？

Question

我有几个消息框，每个框都有一个数据作者属性。

如果我想在 CSS 中将样式应用到这些消息框，我可以这样做：

[data-author="Ben"] {
  background-color: blue;
}

但我不确定如何使用 Tailwind CSS 来做到这一点，或者是否可能。任何想法？

谢谢

Answer 1

从 Tailwind v3.2 开始，支持数据属性变体。

<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

请参阅此处：https ://tailwindcss.com/blog/tailwindcss-v3-2#data-attribute-variants

Answer 2

您可以通过添加变体来做到这一点。在你的tailwind.config.js：

添加const plugin = require('tailwindcss/plugin')到页面顶部。

然后在导出中添加：

  plugins: [
    plugin(({ addVariant }) => {
      addVariant('ben', '&[data-author="Ben"]')
    }),
  ]

您所要做的就是按照您想要的方式使用它：ben:bg-blue-500

不过，您需要为每个作者创建一个新的，或者想出一个按颜色对它们进行分组的约定。

Answer 3

这对于 Tailwind 来说是不可能的，您只能通过为元素提供类来定位元素。但是，您仍然可以编写自定义 CSS 并使用 tailwind 向其添加样式@apply：

[data-author="Ben"] {
  @apply bg-blue-500;
}