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

Question

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

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

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

但我不确定如何使用 Tailwind CSS 做到这一点，或者它是否可能。有什么想法吗？

谢谢

Answer 1

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

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

然后在你的导出中添加:

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

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

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