如何在Tailwind中组合data属性与disabled选择器实现特定条件样式？

要实现仅当按钮处于disabled状态且data-loading≠true时应用样式，可以用以下两种方法：

方法一：组合伪类写法（Tailwind v3+支持） #

直接使用 disabled:not(data-[loading=true]):bg-red 类，精准匹配符合条件的按钮：

• 生效场景：<button disabled data-loading="false" class="disabled:not(data-[loading=true]):bg-red">Submit</button> 或 <button disabled class="disabled:not(data-[loading=true]):bg-red">Submit</button>
• 不生效场景：<button disabled data-loading="true" class="disabled:not(data-[loading=true]):bg-red">Submit</button>（完全符合需求）

方法二：样式覆盖写法（兼容低版本Tailwind） #

如果你的Tailwind版本较低，不支持组合伪类，可以用「默认样式+覆盖样式」的思路：
先给所有disabled按钮加红色背景，再给同时带有data-loading=true的disabled按钮覆盖样式：

<button disabled data-loading="true" class="disabled:bg-red data-[loading=true]:disabled:bg-transparent">Submit</button>

这种写法兼容性更强，也能达到需求效果。

注：你之前的写法本身是正确的，如果测试时看不到效果，大概率是用了data-loading=true的按钮测试（此时样式本就不该生效），可以换data-loading=false或不带data-loading属性的disabled按钮验证。

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