如何使用Tailwind CSS为所有嵌套元素添加样式？

问题场景 #

原本通过以下代码能为p标签内的所有a标签设置红色文本：

<p class='[&_a]:text-[red]'><a>hi</a> world</p>

现在想把范围扩展到p内的所有元素（a、div等任意元素），尝试[&_*]:text-[red]却无效，求解决办法。

解决方案 #

1. 选中所有后代元素（含嵌套）

[&_*]:text-[red]这个写法本身是正确的，对应CSS选择器p *，会选中p下所有层级的元素。如果没生效，排查这两个点：

• Tailwind未扫描到该类：打开tailwind.config.js，确认你的HTML文件路径在content配置里，Tailwind只生成扫描到的类的CSS。
• 样式被覆盖：可以给样式加优先级标记，改成[&_*]:!text-[red]，强制覆盖其他冲突样式。

2. 仅选中直接子元素

如果只需要给p的直接子元素设置样式，用[&>*]:text-[red]，对应CSS选择器p > *，只会选中直接嵌套在p下的元素。

额外补充：让所有文本变红（含文本节点）

如果你的需求是让p内所有文本（包括“world”这类直接写在p里的文本节点）都变红，不用针对元素设置，直接给p加text-[red]即可：

<p class='text-[red]'><a>hi</a> world</p>

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