在TailwindCSS中如何基于子元素data属性设置样式？

给定HTML代码：

<div>
    <p data-a="true"></p>
    <p data-a="false"></p>
    <p data-a="false"></p>
    <p data-a="false"></p>
</div>

需求：将data-a属性值为true的<p>元素字体设置为加粗。

尝试给父<div>应用[&>a]:data-[a="true"]:font-bold样式，但该写法会检测父元素是否拥有data-a属性，符合条件时给所有子元素添加加粗样式，无法实现目标需求。

调整选择器的作用对象，把属性选择器绑定到目标子元素<p>上即可。正确的Tailwind自定义选择器写法为：

[&>p[data-a="true"]]:font-bold

将这个类添加到父<div>标签上，就能精准选中父元素下所有data-a="true"的<p>元素，为其设置字体加粗样式。

内容的提问来源于stack exchange，提问作者Lucien950