CODEWITHSUNDEEP
tailwind-css
Alejo Dev
Alejo Dev

Reputation: 2576

TailwindCSS: disabled variant not working

I am trying to use disabled variant in tailiwnd, but it does not seem to work. I do not know what to do.

I want to change button apperance if it is disabled, I have read the documentation and it says 'disabled' variant in not enabled by default. So I modify my tailwind.config.js and now it looks like this:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      opacity: ['disabled']
    }
  },
  plugins: [],
}

I have this code in my page, both buttons look the same:

  <div class="text-center space-x-8">
    <button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none disabled:opacity-50" tabindex="-1">
      Submit
    </button>
    <button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md disabled:opacity-50" disabled tabindex="-1">
      Submit
    </button>
  </div>

I already re-compiled my code and deleted all my browsers caché, but it still does not work. Do I have to do anything else for this to work?

Upvotes: 26

Views: 71527

Answers (5)

Egy Ramschie
Egy Ramschie

Reputation: 53

Somehow using vue I found a bug, this happens because I teleported the button to the body. Some buttons works, others doesnt. So in order to fix this, I created a quick fix on my css.

components/button.css

button:disabled {
  @apply opacity-50 cursor-not-allowed bg-gray-400 text-white  !important;
}

tailwind.css


/* .... other imports */

/* section: components */
@import url("components/button.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

This somehow solved my issue

Upvotes: 0

kuzdogan
kuzdogan

Reputation: 815

For me it was because I was trying to use disabled on a <div> element.

Changing the element to <button> resolved the issue.

Upvotes: 5

Nick
Nick

Reputation: 6352

It's now possible to enable all variants by default with the new just in time (JIT) compiler. No need to update your Tailwind config file every time you want to add a new variant.

1. Upgrade to TailwindCSS 2.1 or later

npm i -D tailwindcss@latest

2. Enable JIT mode in your config

// tailwind.config.js
module.exports = {
 mode: 'jit',
  purge: [
    // ...
  ],
  theme: {
    // ...
  }
  // ...
}

3. Explicitely set all files in the purge config

The JIT compiler will look at all these files (and only these files) to generate the CSS on demand. If a file isn't listed here, the CSS won't be generated.

module.exports = {
  mode: 'jit',
 // These paths are just examples, customize them to match your project structure
 purge: [
   './public/**/*.html',
   './src/**/*.{js,jsx,ts,tsx,vue}',
 ],
  theme: {
    // ...
  }
  // ...
}

Docs: https://tailwindcss.com/docs/just-in-time-mode

Upvotes: 2

William Walton
William Walton

Reputation: 61

I had this problem and updating Tailwind CSS to the latest version fixed it.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Here's the link: Upgrade Guide -Tailwind CSS It will change other things that you might want to be aware of.

Upvotes: 6

Alejo Dev
Alejo Dev

Reputation: 2576

I found the solution by using play.tailwindcss.com:

This is the syntax I have to use in the tailwind.config.js file:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    opacity: ({ after }) => after(['disabled'])
  },
  plugins: [],
}

Upvotes: 25

Related Questions