如何在顺风中链接数据属性和禁用选择器？

Question

我有一个带有 data-loading=true 和禁用属性的按钮。我需要在 tailwind 中编写一种仅在 data-loading!=true 且禁用时才适用的样式。

<button data-loading='true' disabled>Submit</button>

尝试过（不起作用）

disabled:not(data-[loading=true]):bg-red

Answer 1

当元素与 disabled:

 伪类匹配时，您可以使用 

:disabled

 变体

。

当

data-loading

不是

true

的值时，您可以使用带有 :not() 的

任意变体

和属性选择器：

[&:not([data-loading=true])]:

。

要将这两者结合起来，您可以单独链接它们：

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<button data-loading='true' disabled class="[&:not([data-loading=true])]:disabled:bg-red-500">Submit</button>
<button data-loading='false' disabled class="[&:not([data-loading=true])]:disabled:bg-red-500">Submit</button>

<button data-loading='true' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button>
<button data-loading='false' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button>

或者您可以在任意变体中使用

:disabled

伪类而不是内置变体：

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<button data-loading='true' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button>
<button data-loading='false' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button>