Implementing disabled button states with TailwindUI on NextJS app

Question

I have a NextJS app that was using Atomic CSS and has a button that is disabled if a form is not filled out:

      <Button
        className="primary"
        onClick={handleCreateCommunity}
        disabled={!phone || !communityName}
      >
        Create
      </Button>

I want to change to using my new TailwindUI primary buttons style:

.primary-btn {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

Obviously, I need to apply className="primary" --- but I don't know how to make the disabled state work. Do I create another component that is like .btn-disabled? But then how do I apply that style when the form is not filled out?

--

EDIT:

This is what my index.css looks like:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .primary-btn {
        @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-300;
    }
 }

Answer 1

You need to define styles for the disabled state just like you do with focus.

Edit: You are not using directives based on your comment. They are essential because they override default tailwind styles during compile, so they are not duplicated and they also purge unused custom styles at build.

Custom styles must be imported after the layer they are applied to. In your case after @tailwind components.

@tailwind components;

@layer components {
 .primary-btn {
  @apply disabled:bg-blue-300;
 }
}

Answer 2

If you are looking an easy switch from atomic-css to tailwind-css i prefer you use button component provided by tailwind-css

Follow this rough pattern to get your desired result.

<button
  type="button"
  className=" /* enable class attributes */
               disabled: /* disabled class attributes*/ "
  disabled={/* disable logic in true or false */}
>

Hence your final code goes like :

<button
  type="button"
  className=" inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-300"
  onClick={handleCreateCommunity}
  disabled={!phone || !communityName} // your disable logic goes here
>
  Primary
</button>

Ouput :

When disabled is false :

When disabled is true

Note: if you want to define the class attributes in css file you can do that by adding style in index.css file in @layer components.

@layer components {
  .primary-btn {
    @apply m-5 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-300;
  }
}

And then the className of Button becomes just primary-btn

 <button
      type="button"
      className="primary-btn"
      disabled={false} // your disable logic goes here
    >
      Primary
 </button>