Why isn't the "disabled:" tailwind prefix working in my react app?

user_11561783 0
Viewed 5532

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.

Element as rendered in browser

<button type="submit" disabled="" class="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Submit</button>

Code

state = {
        formIsVaild: false
    }

render() {
    <button type="submit" disabled={!this.state.formIsVaild} className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Open Discussion</button>
}

I even removed the condition and tried this...

state = {
        formIsVaild: false
    }

render() {
    <button type="submit" disabled className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Open Discussion</button>
}

No matter what value I pass to the disable attribute, disabled="" 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?

Minimal example

import React, { Component } from 'react';

class FormData extends Component {
    state = {
        formIsVaild: false
    }

    render() {
        return (
                <div className="grid grid-cols-3 gap-4">
                    <div className="col-span-2">
                        <form>
                            <button type="submit" disabled={!this.state.formIsVaild} className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Submit</button>
                        </form>
                    </div>
                </div>
        )
    }
}

export default FormData
tailwind-css reactjs
2 Answers

The button is in fact disabled, but the style for the disabled: tailwind prefix is not applied because it is probably not enabled, since it's disabled by default.

You can control whether disabled variants are enabled for a plugin in the variants section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      opacity: ['disabled'],
    }
  },
}

In your case, it would probably be backgroundColor: ['disabled']. (Tailwind playground)

user_12189800

Here is a simple script I've done with React.useState()

import React from 'react'


export default function App() {
  const [state, setState] = React.useState(false);

  return (
    <div className="App">
      <button onClick={()=>{setState(!state)}}>
        State is: {state? 'true':'false'}
      </button>
    </div>
  );
}

You did not provide enough info on how You change disable state. I assume You miss exactly this part.

Here is with class states: Short description: First button changes this.state.formIsValid, second button is being disabled.

import React, { Component } from 'react';

export default class FormData extends Component {
    state = {
        formIsVaild: false
    }

    render() {
        return (
          <div className="grid grid-cols-3 gap-4">
              <div className="col-span-2">
                <button onClick={()=>{this.setState({formIsVaild:!this.state.formIsVaild})}}>Change state</button>
                  <form>
                      <button type="submit" disabled={this.state.formIsVaild} className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Submit</button>
                  </form>
              </div>
          </div>
        )
    }
}
user_121583210
Related