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

Question

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.

Petterson

Answer 1

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>

Cilurzo

Great option if you only use <button>. Note: it doesn't work with <a> links – Mamey

@Mamey When you use a and style it to look like a button, you are doing something wrong. But if it's requirement, in this case you are always opting-in for pointer-events: none; so :hover will not work anyways. – Purebred

Answer 2

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.

Revere

This solution is more elegant ! – Unhandsome

This is nice but I also want disabled:cursor-not-allowed and it seems both can't be applied at the same time... but open to solutions – Petrous

^ Nevermind, I figured it out. enabled:hover:bg-red-100 works. Essentially using the enabled: tag. If you have a custom tag like loading, then put enabled:not(loading):hover:bg-red-100. Then it will only show hover colors when not loading and not disabled – Petrous

Answer 3

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.

Larry

Applied your changes, it doesn't work. I am still facing transitions. – Petterson

are you using webpack? – Larry

its in Dev env, im not sure about webpack use. – Petterson

Answer 4

I personnaly achived by doing this:

    <button
      disabled={!onClick}
      type="button"
      onClick={onClick}
      className={cx(
        `flex cursor-pointer flex-col items-center disabled:pointer-events-none disabled:cursor-default`,
        className,
      )}
    >

if no onClick func is pass to my component i disable with css the hover and the cursor-pointer

Twin

Answer 5

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

Keegan

Answer 6

try this==>

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

Hydrus