如何在Tailwind中为非.disabled状态的按钮添加cursor-pointer类？

直接利用Tailwind的否定伪类变体，就能实现仅在按钮未添加.disabled类时应用cursor-pointer样式：

<button class="prev not-[.disabled]:cursor-pointer ...">上一页</button>
<button class="next not-[.disabled]:cursor-pointer ...">下一页</button>

not-[.disabled]是Tailwind的自定义否定变体，会匹配所有不包含.disabled类的元素，只有满足这个条件时，cursor-pointer才会生效。

如果你的项目需要频繁用到这类逻辑，也可以在tailwind.config.js中注册自定义变体，让写法更简洁：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...其他配置项
  plugins: [
    function({ addVariant }) {
      addVariant('not-disabled', '&:not(.disabled)');
    }
  ]
}

注册完成后就可以这样使用：

<button class="prev not-disabled:cursor-pointer ...">上一页</button>
<button class="next not-disabled:cursor-pointer ...">下一页</button>

以上两种方式都无需编写原生CSS，完全基于Tailwind实现需求。

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