使用uniapp demo，disabled不生效

[linen1794]

使用uniapp demo，编译为小程序，disabled类不生效

<button class="bg-green-500 text-white disabled:opacity-50" disabled>disable</button>

正常效果

[sonofmagic]

这个是由于小程序支持的选择器，不像 h5 这么多，在 tailwindcss 库中，你的 disabled:opacity-50 写法生成的 css 为:

.disabled:opacity-50:disabled{
    opacity: 0.5
}

但是小程序的 wxss 压根不认识 :disabled 这个选择器，所以即使生成了对应的 css 也是不生效的

详见 WXSS#选择器章节

所以假如你要更改 button disabled 下的状态，不妨这么写:

    <button class="bg-green-500 text-white" :class="{
      'opacity-50':disabled
    }" :disabled="disabled">disable</button>

附录

tailwindcss 这个库的设计运行环境，就是在 web 端。所以它的实现方式，都是按照 h5 来的，我当时做兼容小程序的时候就发现，很多的前缀，都是小程序不支持的。这时候只能用小程序自带的一些属性来解决。

[linen1794]

我明白了，非常感谢您的解答，这对我很有帮助👍