Tailwind CSS父容器子元素响应式样式失效问题求助

• 你当前的写法错误在于断点前缀的位置，Tailwind要求断点前缀必须放在整个自定义子选择器的最前面，而非样式类前面。
• 正确写法是把lg:、md:这类断点前缀放在[&>h1]的前面，而非text-lg前。

有效代码示例 #

<div class="[&>h1]:text-sm md:[&>h1]:text-md lg:[&>h1]:text-lg">
    {!! $yourBladeVariable !!}
</div>

无效写法的原因 #

• [&>h1]:lg:text-lg：断点前缀加在样式类前，Tailwind无法识别该嵌套语法，会将lg:text-lg判定为无效类。
• [&>lg:h1]:text-lg：错误将断点前缀嵌入子元素选择器，不符合Tailwind语法规则。
• lg:[&>h1]:text-lg：若此写法仍不生效，先检查Tailwind版本是否为v3及以上（v2及更早版本不支持断点+自定义选择器的组合写法），同时确认配置中已启用自定义选择器解析。

另外，注意代码中的&和>是HTML实体转义，在Blade模板的class属性里直接写&和>（即[&>h1]即可，无需转义）。

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