The `disabled:` variant in Tailwind CSS allows you to style elements that have the `disabled` HTML attribute. Common classes are `disabled:opacity-50` and `disabled:cursor-not-allowed`.
Enabled Button:
Disabled Button:
This button has the `disabled` HTML attribute and Tailwind's `disabled:opacity-50` and `disabled:cursor-not-allowed` classes.
This input field has the `disabled` HTML attribute. Tailwind classes `disabled:opacity-75` and `disabled:cursor-not-allowed` are applied. We also use `bg-gray-100` directly for a common disabled input look, which `disabled:opacity-75` then affects.