Tailwind CSS 禁用按钮

在 Tailwind CSS 中，可以使用 .cursor-not-allowed、.opacity-50 和 .pointer-events-none 类来禁用按钮。

cursor-not-allowed

.cursor-not-allowed 类可以禁用按钮的点击事件，并将鼠标指针变成禁止符号。可以在 <button> 或 <a> 元素上应用这个类。

<button class="cursor-not-allowed">禁用按钮</button>

opacity-50

.opacity-50 类可以将按钮的透明度降低到 50%，使其看起来变灰。虽然按钮仍然可点击，但透明度更低可能会给用户一个禁用的感觉。可以在 <button> 或 <a> 元素上应用这个类。

<button class="opacity-50">禁用按钮</button>

pointer-events-none

.pointer-events-none 类可以完全禁用按钮的点击事件，并将鼠标指针变成默认的箭头符号。可以在 <button> 或 <a> 元素上应用这个类。

<button class="pointer-events-none">禁用按钮</button>

以上类可以同时应用在一个按钮上，以实现更全面的禁用效果。

<button class="cursor-not-allowed opacity-50 pointer-events-none">全面禁用按钮</button>