title: TailwindCSS: disabled variant not working
body: <p>I am trying to use <em>disabled</em> variant in tailiwnd, but it does not seem to work. I do not know what to do.</p>
  <p>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:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    purge: [],
    theme: {
      extend: {},
    },
    variants: {
      extend: {
        opacity: ['disabled']
      }
    },
    plugins: [],
  }
  
  </code></pre>
  <p>I have this code in my page, both buttons look the same:</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;div class=&quot;text-center space-x-8&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;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&quot; tabindex=&quot;-1&quot;&gt;
        Submit
      &lt;/button&gt;
      &lt;button type=&quot;button&quot; class=&quot;py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md disabled:opacity-50&quot; disabled tabindex=&quot;-1&quot;&gt;
        Submit
      &lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  <p>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?</p>