The "Gotcha" with `disabled:` variants (like `disabled:opacity-50`) is that they ONLY apply if the HTML element actually has the `disabled` attribute . Simply adding Tailwind's `disabled:*` classes without the HTML attribute will not make the element functionally disabled, nor will the `disabled:*` styles apply.
1. Correctly Disabled Button:
This button has:
- The HTML `disabled` attribute.
- `disabled:opacity-50` and `disabled:cursor-not-allowed` Tailwind classes.
Result: It appears faded, and the cursor is `not-allowed`. It is not clickable.
2. Gotcha Example: Missing `disabled` Attribute:
This button has:
-
NO HTML `disabled` attribute.
- `disabled:opacity-50` and `disabled:cursor-not-allowed` Tailwind classes.
Result: The button looks and acts enabled. The `disabled:*` styles are ignored because the HTML `disabled` attribute is missing. It is clickable, and the cursor is the default pointer.
3. Standard Enabled Button (for comparison):
This is a standard enabled button without any `disabled` attributes or `disabled:` classes.