26

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?

Improve this question
1
  • This is because the configuration file is not being loaded. Commented Jan 18, 2021 at 10:50

5 Answers 5

Reset to default
26

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: [],
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

May I know what is this after() function doing? Couldn't find any documentation on this
Found the link.. github.com/tailwindlabs/tailwindcss/issues/…
How do you add more variants after using the "after" syntax? Like, if I wanted opacity to support both "active" and "disabled" how would I do that?
How to disable hover when the button is disabled?
@lAaravl you can used enabled when you only want to apply another style when an element is not disabled enabled:hover:border-gray-400 disabled:opacity-75
7

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.

Improve this answer

2 Comments

this is correct, it now works as documented in tailwindcss.com/docs/hover-focus-and-other-states
note the CDN version doesn't enable it; must be enabled through the tailwind config
5

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

Changing the element to <button> resolved the issue.

Improve this answer

1 Comment

Lmao, literally same. Idiot me 🤦🏻‍♂️
2

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

Improve this answer

1 Comment

JIT mode is the default in TailwindCSS v3, the current version. See tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine
0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.