why does react button disabled not working while using tailwind css along

Question

     import React, { useState } from "react";
        import facebook from "../UI/icons/facebook.png";
        import Button from "../UI/Button/Button";
        import Card from "../UI/Card/Card";
        import twitter from "../UI/icons/twitter.png";
        import instagram from "../UI/icons/instagram.png";
        const Login = () => {
          const [enteredEmail, setEnteredEmail] = useState("");
          const [emailIsValid, setEmailIsValid] = useState("");
          const [enteredPassword, setEnteredPassword] = useState("");
          const [passwordIsValid, setPasswordIsValid] = useState("");
          const [formIsValid, setFormIsValid] = useState("");
        
          const emailChangeHandler = (event) => {
            setEnteredEmail(event.target.value);
        
            setFormIsValid(
              event.target.value.includes("@") && enteredPassword.trim().length > 6
            );
          };
          const passwordChangeHandler = (event) => {
            setEnteredPassword(event.target.value);
            setFormIsValid(
              event.target.value.trim().length > 6 && enteredEmail.includes("@")
            );
          };
          const validateEmailHandler = () => {
            setEmailIsValid(enteredEmail.includes("@"));
          };
        
          const validatePasswordHandler = () => {
            setPasswordIsValid(enteredPassword.trim().length > 6);
          };
          const submitHandler = (event) => {
            event.preventDefault();
            console.log(enteredEmail);
            console.log(enteredPassword);
          };
          return (
            <Card className="bg-slate-100 border-1 rounded-xl shadow-xl w-[30vw] m-auto mt-20 mb-20">
              <div className="flex justify-center text-2xl font-bold pt-4">Login</div>
              <div className="flex justify-center px-0 py-5">
                <form onSubmit={submitHandler}>
                  <div>
                    <label htmlFor="email" className="text-lg font-bold">
                      E-mail
                    </label>
                    <div>
                      <input
                        value={enteredEmail}
                        type="email"
                        id="email"
                        placeholder="Type your email"
                        className={
                          emailIsValid === false
                            ? "bg-red-200 border-b-[2px] border-red-600 text-white text-lg px-1 rounded shadow-md h-10  w-[19rem] outline-none"
                            : "border-b-[2px] text-lg px-1 rounded shadow-md border-gray-400 h-10  w-[19rem] outline-none"
                        }
                        onChange={emailChangeHandler}
                        onBlur={validateEmailHandler}
                      />
                    </div>
                  </div>
                  <div className="mt-4">
                    <label className="text-lg font-bold" htmlFor="password">
                      Password
                    </label>
                    <div>
                      <input
                        value={enteredPassword}
                        type="password"
                        id="password"
                        placeholder="Type your password"
                        className={
                          passwordIsValid === false
                            ? "bg-red-200 border-b-[2px] border-red-600 text-white text-lg px-1 rounded shadow-md h-10  w-[19rem] outline-none"
                            : "border-b-[2px] text-lg px-1 rounded shadow-md border-gray-400 h-10  w-[19rem] outline-none"
                        }
                        onChange={passwordChangeHandler}
                        onBlur={validatePasswordHandler}
                      />
                    </div>
                    <div className="flex justify-end">Forget password</div>
                  </div>

                  <div className="flex justify-center">
                       <Button
                      className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor-pointer shadow-md bg-slate-400 hover:bg-slate-600 hover:text-white"
                      type="submit"
                      disabled={!formIsValid}
                    >
                      LOGIN
                    </Button>
                  </div>

                  <div className="flex justify-center mt-4">Or Sign Up Using</div>
                  <div className="flex justify-center mt-2 ">
                    <div className="mx-1">
                      <img src={instagram} alt="facebook" width="30" />
                    </div>
                    <div className="mx-1">
                      <img src={twitter} alt="facebook" width="30" />
                    </div>
                    <div className="mx-1">
                      <img src={facebook} alt="facebook" width="30" />
                    </div>
                  </div>
                  <div className="flex justify-center mt-[9rem]">Or Sign Up Using</div>
                  <div className="flex justify-center">SIGN UP</div>
                </form>
              </div>
            </Card>
          );
        };
        
        export default Login;

this is button code where i've error

<Button
                          className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor-pointer shadow-md bg-slate-400 hover:bg-slate-600 hover:text-white"
                          type="submit"
                          disabled={!formIsValid}
                        >
                          LOGIN
                        </Button>

image this is my code's output and i want to make this LOGIN button disable while validating fields but it don't work while i am using className that contain tailwind code.. i also have a piic and code where disable works.

 <Button
                //className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor- 
                 //pointer shadow-md bg- 
                 //slate-400 hover:bg-slate-600 hover:text-white"
                      type="submit"
                      disabled={!formIsValid}
                    >
                      LOGIN
                    </Button>

image

now disable is working as i have commented out className attribute.

Answer 1

I was struggling with disabling an input field and decided to use a workaround using only the classes with a helper function:

export function classNames(...classes) {
  return classes.filter(Boolean).join(' ');
}

which can be used like this

import { classNames } from 'wherever/you/store/helpers';

<Button
  className={classNames(
    'font-semibold',
    formIsValid
      ? 'bg-green-300 text-green-900'
      : 'bg-gray-300 text-gray-600 cursor-not-allowed'
  )}
  disabled={!formIsValid}
>
  Click me
</Button>

This is useful in general for dynamically applying styles, since Tailwind CSS 3 does not support dynamic class names.

Answer 2

It is working, the button is not clickable, but the style isn't changing because you need to choose what the disabled state style looks like using disabled: in your class (You need Tailwind version >= v1.1.0)

Little example of a button

<Button
     class="bg-green-300 disabled:bg-gray-400"
     disabled={!formIsValid}
>
  Click me
</Button>

You also need to enable the disabled variant in your tailwind.config.js with something like this

module.exports = {
  variants: {
    extend: {
      backgroundColor: ["disabled"],
      textColor: ["disabled"]
  },
}

I am not a react dev so maybe someone can confirm this, but you should also change your useState("") to useState(true) where it is appropriate, basically all your IsValid variables, since they should be Booleans and not Strings