Disabled state styling in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the correct Tailwind CSS selector for disabled buttons

Which Tailwind CSS class combination correctly applies a gray background and disables pointer events only when a button is disabled?

Tailwind

<button class="btn">Click me</button>

A btn disabled:bg-gray-400 disabled:pointer-events-none

B btn [disabled]:bg-gray-400 [disabled]:pointer-events-none

C btn :disabled:bg-gray-400 :disabled:pointer-events-none

D btn .disabled:bg-gray-400 .disabled:pointer-events-none

💡 Hint

Tailwind uses square brackets for attribute selectors in class names.

Tailwind applies styles to disabled elements using the [disabled] attribute selector syntax inside class names. Option B uses [disabled]:bg-gray-400 and [disabled]:pointer-events-none, which correctly target disabled buttons.

❓ rendering

intermediate

What visual effect does this disabled button have?

Given this button code, what will the user see when the button is disabled?

<button disabled class="bg-blue-600 text-white px-4 py-2 rounded [disabled]:bg-gray-400 [disabled]:cursor-not-allowed">Submit</button>

A Button with blue background and cursor changes to not-allowed always

B Button with blue background and cursor changes to pointer on hover

C Button with gray background and cursor changes to not-allowed on hover

D Button with gray background and cursor changes to not-allowed always

💡 Hint

The cursor style applies only when disabled.

The [disabled]:bg-gray-400 changes the background to gray only when disabled. The [disabled]:cursor-not-allowed changes the cursor to not-allowed always when disabled, not just on hover.

🧠 Conceptual

advanced

Why use pointer-events-none on disabled elements?

What is the main reason to add pointer-events-none to a disabled button in Tailwind CSS?

A To prevent the button from receiving mouse events like clicks and hovers

B To make the button invisible when disabled

C To change the button text color automatically

D To enable keyboard navigation on the button

💡 Hint

Think about how users interact with disabled buttons.

pointer-events-none disables mouse interactions like clicks and hover effects, ensuring the disabled button cannot be clicked or hovered.

📝 Syntax

advanced

Which Tailwind class syntax is invalid for disabled styling?

Which option contains an invalid Tailwind CSS class for styling disabled elements?

A disabled:opacity-50

B [disabled]:bg-gray-300

C [disabled]:cursor-not-allowed

D [disabled]:opacity-50

💡 Hint

Tailwind uses square brackets for attribute selectors, not just the word 'disabled'.

Option A uses disabled:opacity-50 which is invalid because Tailwind requires attribute selectors to be wrapped in square brackets like [disabled].

❓ accessibility

expert

Best practice for accessible disabled buttons

Which approach best improves accessibility for disabled buttons styled with Tailwind CSS?

A Only use the disabled attribute and style with <code>[disabled]</code> classes

B Remove the disabled attribute and only use CSS to make the button look disabled

C Use <code>aria-disabled="true"</code> and style with <code>[aria-disabled='true']</code> classes

D Use <code>tabindex="-1"</code> without any disabled attribute or aria attributes

💡 Hint

Consider screen readers and keyboard users.

Using aria-disabled="true" communicates the disabled state to assistive technologies. Styling with [aria-disabled='true'] ensures consistent visual feedback. This approach supports accessibility better than just the disabled attribute.

Practice

1. What does the disabled: prefix in Tailwind CSS do?

easy

A. Removes the element from the page

B. Disables the element functionality

C. Applies styles only when the element has the disabled attribute

D. Makes the element visible only on hover

Solution

1. Step 1: Understand the disabled attribute

   The HTML disabled attribute marks an element as inactive or unusable.

2. Step 2: Role of Tailwind's disabled: prefix

   The disabled: prefix applies CSS styles only when the element is disabled, allowing visual changes without affecting functionality.

3. Final Answer:

   Applies styles only when the element has the disabled attribute -> Option C

4. Quick Check:

   disabled: prefix = style on disabled [OK]

Hint: Remember disabled: styles only affect disabled elements [OK]

Common Mistakes:

• Thinking disabled: disables functionality
• Confusing disabled: with hover: or focus:
• Assuming disabled: removes elements

2. Which Tailwind CSS class correctly changes the cursor to 'not-allowed' when a button is disabled?

easy

A. disabled:cursor-not-allowed

B. cursor-not-allowed

C. cursor-disabled

D. disabled:cursor-disabled

Solution

1. Step 1: Identify the cursor style for disabled state

   The cursor style for disabled elements is not-allowed, which shows a 'no' symbol.

2. Step 2: Use Tailwind's disabled prefix

   To apply this style only when disabled, use disabled:cursor-not-allowed. Plain cursor-not-allowed applies always.

3. Final Answer:

   disabled:cursor-not-allowed -> Option A

4. Quick Check:

   disabled:cursor-not-allowed = correct syntax [OK]

Hint: Use disabled: prefix before cursor class for disabled styling [OK]

Common Mistakes:

• Using cursor-not-allowed without disabled:
• Using non-existent cursor-disabled class
• Placing disabled: after the class name

3. What will be the background color of this button when disabled?

<button disabled class="bg-blue-500 disabled:bg-gray-400">Click me</button>

medium

A. Red (#ef4444)

B. Blue (#3b82f6)

C. No background color

D. Gray (#9ca3af)

Solution

1. Step 1: Check the button's disabled attribute

   The button has the disabled attribute, so disabled styles apply.

2. Step 2: Analyze Tailwind classes for background

   The normal background is bg-blue-500. When disabled, disabled:bg-gray-400 overrides it to gray.

3. Final Answer:

   Gray (#9ca3af) -> Option D

4. Quick Check:

   disabled attribute triggers disabled:bg-gray-400 [OK]

Hint: Disabled attribute triggers disabled: styles override base [OK]

Common Mistakes:

• Ignoring disabled: prefix effect
• Assuming base bg-blue-500 stays
• Confusing gray-400 with gray-500

4. Identify the error in this Tailwind usage for disabled styling:

<input disabled class="disabled:bg-gray-300 cursor-not-allowed" />

medium

A. Cursor style should use disabled: prefix

B. Cannot style input elements with Tailwind

C. disabled:bg-gray-300 is invalid syntax

D. Missing disabled attribute on input

Solution

1. Step 1: Check the disabled attribute presence

   The input has the disabled attribute, so disabled styles can apply.

2. Step 2: Analyze cursor style usage

   The cursor style cursor-not-allowed applies always. To apply only when disabled, it should be disabled:cursor-not-allowed.

3. Final Answer:

   Cursor style should use disabled: prefix -> Option A

4. Quick Check:

   Cursor needs disabled: prefix for disabled state [OK]

Hint: Add disabled: prefix to cursor styles for disabled elements [OK]

Common Mistakes:

• Forgetting disabled: prefix on cursor
• Thinking disabled:bg-gray-300 is wrong
• Assuming inputs can't be styled

5. You want a button to have a blue background normally, but when disabled, it should have a gray background and the text should be lighter gray. Which Tailwind classes achieve this?

hard

A. bg-blue-600 disabled:bg-gray-400 text-white text-gray-300

B. bg-blue-600 disabled:bg-gray-400 disabled:text-gray-300 text-white

C. bg-blue-600 bg-gray-400 disabled:text-gray-300 text-white

D. bg-blue-600 disabled:bg-gray-400 text-gray-300 disabled:text-white

Solution

1. Step 1: Set normal background and text colors

   Use bg-blue-600 for blue background and text-white for white text normally.

2. Step 2: Apply disabled styles with prefix

   Use disabled:bg-gray-400 for gray background and disabled:text-gray-300 for lighter gray text when disabled.

3. Step 3: Verify order and prefixes

   Classes must have disabled: prefix for disabled styles; base styles apply otherwise.

4. Final Answer:

   bg-blue-600 disabled:bg-gray-400 disabled:text-gray-300 text-white -> Option B

5. Quick Check:

   Disabled styles need disabled: prefix [OK]

Hint: Use disabled: prefix on all styles changing when disabled [OK]

Common Mistakes:

• Missing disabled: prefix on text color
• Placing disabled classes without prefix
• Mixing order causing style override issues