如何让Tailwind disabled变体兼容div、li等任意元素？

问题根源 #

<li>、<div>这类元素本身不支持原生disabled属性，所以Tailwind内置的disabled:变体根本不会触发——哪怕你在配置里扩展了backgroundColor的disabled变体也没用，因为浏览器不会给这些元素识别disabled状态。

替代方案：自定义data属性（完全可行） #

用自定义data-disabled属性是最直接的解决办法，两种实现方式任选：

方式1：用Tailwind任意变体直接写（无需改配置）

不用修改Tailwind配置，直接用属性选择器作为变体，写法如下：

<!-- 禁用状态的li -->
<li type="button" class="[data-disabled]:bg-red-500 [data-disabled]:cursor-not-allowed [data-disabled]:opacity-70" data-disabled>
  已禁用的列表项
</li>

<!-- 正常状态的li -->
<li type="button" class="[data-disabled]:bg-red-500 [data-disabled]:cursor-not-allowed [data-disabled]:opacity-70">
  可点击的列表项
</li>

这里的[data-disabled]是Tailwind的任意变体语法，直接基于属性选择器生成样式，无需额外配置。

方式2：注册自定义变体（写法更简洁）

如果觉得方括号写法不够清爽，可以在Tailwind配置里注册一个自定义变体，让它像原生disabled:一样使用：

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addVariant }) {
      // 注册data-disabled变体
      addVariant('data-disabled', '&[data-disabled]');
    }
  ],
}

之后就能直接用data-disabled:前缀写样式了：

<li type="button" class="data-disabled:bg-red-500 data-disabled:cursor-not-allowed" data-disabled>
  已禁用的列表项
</li>

额外注意事项 #

光加样式还不够，要真正禁用点击行为，得在JS里判断属性并阻止事件：

// 给所有可点击li绑定事件
document.querySelectorAll('li[type="button"]').forEach(item => {
  item.addEventListener('click', (e) => {
    // 如果有data-disabled属性，阻止点击
    if (item.hasAttribute('data-disabled')) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }
    // 这里写正常的点击逻辑
  });
});

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