Tailwind CSS Course
Tailwind CSS
/
Beginner

Disabled State

Definition

A state variant (`disabled:`) that applies classes when an element (usually a form input or button) has the HTML `disabled` attribute applied to it.

Explain Like I'm New

If an input field is disabled (meaning the user cannot type in it), it shouldn't look like a normal input field. You use `disabled:opacity-50` to fade it out, signaling to the user that it is off-limits.

Real World Example

A 'Submit Form' button that remains `disabled:opacity-50` and `disabled:cursor-not-allowed` until the user checks the 'I agree to terms' checkbox.

Common Use Cases

  • •Form validation
  • •Loading states
  • •Permissions

Interactive Example

 Interview Questions
basic
  • What HTML attribute MUST be present on the element for the `disabled:` Tailwind variant to trigger?
intermediate
  • Does adding `disabled:opacity-50` to a `div` do anything?
Flash Cards
Question
Which attribute?
Click to reveal answer
Answer
The `disabled` attribute (e.g., `<button disabled>`).
Question
On a div?
Click to reveal answer
Answer
No. Standard `div` elements cannot inherently be 'disabled' in HTML. The `disabled` attribute is strictly for form elements like `<button>`, `<input>`, `<select>`, and `<textarea>`.