我有几个消息框,每个框都有一个数据作者属性。
如果我想在 CSS 中对这些消息框应用样式,我可以这样做:
[data-author="Ben"] {
background-color: blue;
}
但我不确定如何使用 Tailwind CSS 做到这一点,或者它是否可能。有什么想法吗?
谢谢
最佳答案
您可以通过添加变体来做到这一点。在你的 tailwind.config.js
中:
在页面顶部添加 const plugin = require('tailwindcss/plugin')
。
然后在你的导出中添加:
plugins: [
plugin(({ addVariant }) => {
addVariant('ben', '&[data-author="Ben"]')
}),
]
你所要做的就是按照你想要的方式使用它:ben:bg-blue-500
虽然您需要为每个作者创建一个新的,或者想出一个按颜色对他们进行分组的约定。
https://stackoverflow.com/questions/71394904/