title: Why isn't the "disabled:" tailwind prefix working in my react app?
body: <p>I am trying to disable a submit button on some condition but it doesn't work. When I inspect the element in the browser, this is what is rendered regardless of whether the condition returns true or false.</p>
  <p><em>Element as rendered in browser</em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;button type=&quot;submit&quot; disabled=&quot;&quot; class=&quot;bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md&quot;&gt;Submit&lt;/button&gt;
  </code></pre>
  <p><em>Code</em></p>
  <pre class="lang-js prettyprint-override"><code>state = {
          formIsVaild: false
      }
  
  render() {
      &lt;button type=&quot;submit&quot; disabled={!this.state.formIsVaild} className=&quot;bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md&quot;&gt;Open Discussion&lt;/button&gt;
  }
  </code></pre>
  <p><em>I even removed the condition and tried this...</em></p>
  <pre class="lang-js prettyprint-override"><code>state = {
          formIsVaild: false
      }
  
  render() {
      &lt;button type=&quot;submit&quot; disabled className=&quot;bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md&quot;&gt;Open Discussion&lt;/button&gt;
  }
  </code></pre>
  <p>No matter what value I pass to the disable attribute, <code>disabled=&quot;&quot;</code> get's rendered in the HTML. I even tried to use an input with type submit instead of a button and I'm getting the same result. I am not sure what is going on here... any help?</p>
  <p><strong>Minimal example</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  class FormData extends Component {
      state = {
          formIsVaild: false
      }
  
      render() {
          return (
                  &lt;div className=&quot;grid grid-cols-3 gap-4&quot;&gt;
                      &lt;div className=&quot;col-span-2&quot;&gt;
                          &lt;form&gt;
                              &lt;button type=&quot;submit&quot; disabled={!this.state.formIsVaild} className=&quot;bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md&quot;&gt;Submit&lt;/button&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          )
      }
  }
  
  export default FormData
  </code></pre>