Tailwind CSS - How to disable transform/transition on hover when a button is disabled?

user_6081163 0
Viewed 6933

I am new to Tailwind CSS and CSS in general. I need to make my buttons stop doing transform/transition effects when they are disabled. Currently, the disabled color changes are getting applied but the transformations/transitions are still taking place on hover.

I tried using - disabled:transform-none and disabled:transition-none but it is not giving the desired result.

Technologies being used is - ReactJS, Tailwind CSS

The dummy code snippet with the classes used is as follows:

<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>

Note: disableIt is a state that is used to disable or enable the button

My tailwind.config.js is has the variants section as:

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"],
    },
  },

Please help me out.

tailwind-css react-hooks reactjs
4 Answers

You can use the enabled modifier to only apply a certain class when the button is enabled.

This allows you to specify classes to be added only when the button enabled, rather than attempting to "remove" certain classes when the button is disabled.

Here's a simple example based on your original code:

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

If you want your disabled buttons to not trigger any interaction state like :hover or active, you can also simply add

disabled:pointer-events-none

to the tailwind className.

user_10085470

It works for me without the variants configuration using jit.

This example is using pure HTML to show you how is done, you will need to change it to 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>

I leave an example https://play.tailwindcss.com/RBb3RtRB4B

user_8830690

in tailwind.config.js

variants: {
    extend: {
      opacity:["disabled"],
      cursor:["disabled"]
    },
  },

Now if you add "disabled" into the className, tailwind will provide it as a modifier. Make sure you recompile it after you modify config file.

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"
>

this should work.

user_102628050
Related