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.