Tailwind CSS - 当按钮被禁用时如何禁用悬停时的变换/转换？

Question

总的来说，我对 Tailwind CSS 和 CSS 都很陌生。我需要让我的按钮在禁用时停止执行变换/过渡效果。目前，禁用的颜色更改正在应用，但转换/过渡仍在悬停时发生。

我尝试使用-disabled ：transform-none和disabled：transition-none，但它没有给出所需的结果。

使用的技术是 - ReactJS、Tailwind CSS

包含所使用的类的虚拟代码片段如下：

<button 
    disabled={disableIt} 
    className="text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110  hover:blue-300 hover:shadow-md"
>
    Click me
</button>

注：disable是一个状态，用于禁用或启用按钮

我的tailwind.config.js 的变体部分如下：

variants: {
    opacity: ({ after }) => after(["disabled"]),
    backgroundColor: ({ after }) => after(["disabled"]),
    textColor: ({ after }) => after(["disabled"]),
    hover: ({ after }) => after(["disabled"]),
    cursor: ({ after }) => after(["disabled"]),
    transition: ({ after }) => after(["disabled"]),
    transform: ({ after }) => after(["disabled"]),

    extend: {
      padding: ["hover"],
    },
  },

请帮帮我。

Answer 1

您可以使用enabled修饰符仅在启用按钮时应用某个类。

这允许您指定仅在按钮启用时添加的类，而不是在按钮禁用时尝试“删除”某些类。

这是一个基于您的原始代码的简单示例：

<button 
    disabled={disableIt} 
    className="enabled:transition enabled:transform 
        enabled:hover:translate-x-1 enabled:hover:blue-300"
>
    Click me
</button>

Answer 2

如果您希望禁用的按钮不触发任何交互状态，例如:hover或active，您也可以简单地添加

disabled:pointer-events-none

到顺风类名称。

Answer 3

它适用于我，无需使用 jit 进行变体配置。

此示例使用纯 HTML 向您展示如何完成，您需要将其更改为 React。

<div class="flex items-center justify-center min-h-screen">
  <button disabled class="px-4 py-2 text-white text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110 hover:blue-300 hover:shadow-md disabled:shadow-none">Disabled Click</button>
  <button class="px-4 py-2 text-white text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110 hover:blue-300 hover:shadow-md disabled:shadow-none">Click</button>
</div>

我留下一个例子https://play.tai​​lwindcss.com/RBb3RtRB4B