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

Question

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

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

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

但我不知道如何使用Tailwind CSS来实现这一点，也不知道这是否可能。知道吗？

感谢

Answer 1

截至2022年10月30日的更新答案

从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-属性变体

Answer 2

您可以通过添加一个变体来实现这一点。在您的tailwind.config.js:中

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

然后在您的出口中添加：

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

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

不过，你需要为每个作者创建一个新的，或者想出一个按颜色分组的约定。

Answer 3

您可以使用上面使用的语法。对于实现问题，可以使用@apply指令，该指令可以直接从顺风调用实用程序类

此外，您还可以使用任意值应用顺风颜色之外的颜色

[data-author="Ben"] {
@apply bg-[#bada55];
}

你可以在这篇文章中了解更多关于任意价值的信息：

https://tailwindcss.com/docs/adding-custom-styles#using-任意值

Answer 4

这在顺风中是不可能的，您只能通过给元素赋予类来定位它们。但是，您仍然可以使用tailwind的@apply:编写自定义CSS并为其添加样式

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

Answer 5

我认为您正在寻找用于状态选择的最佳语法：

<a class="bg:blue[data-author=Ben]" data-author="Ben">Ben</a>

所有本机CSS选择器都可以应用：

<button class="opacity:.5[disabled]" disabled>Submit</button>

它是在零配置的情况下启用的，语法与原生CSS非常相似。