TailwindCSS: disabled variant not working

user_1339231 0
Viewed 34699

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?

tailwind-css
4 Answers

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: [],
}
user_13392310

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.

user_150577640

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

user_115069950

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

Changing the element to <button> resolved the issue.

user_65289440
Related