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?

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/64962149/tailwindcss-disabled-variant-not-working

标签

tailwind-css