Disabled state styling in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to disable the button using Tailwind CSS.

Tailwind

<button class="bg-blue-500 text-white py-2 px-4 rounded [1]" disabled>Click me</button>

Drag options to blanks, or click blank then click option'

Aopacity-50 cursor-not-allowed

Bhover:bg-blue-700

Ctext-gray-700

Dborder-2 border-red-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover styles on a disabled button.

Not changing the cursor to indicate disabled state.

Using opacity-50 makes the button look faded, and cursor-not-allowed changes the cursor to show it's disabled.

2fill in blank

medium

Complete the code to apply a gray background when the button is disabled.

Tailwind

<button class="py-2 px-4 rounded bg-blue-600 text-white disabled:[1]" disabled>Submit</button>

Drag options to blanks, or click blank then click option'

Abg-green-500

Bbg-red-500

Cbg-gray-400

Dbg-yellow-300

Attempts:

3 left

💡 Hint

Common Mistakes

Using a bright color for disabled state.

Not using the disabled: prefix.

The disabled:bg-gray-400 class applies a gray background only when the button is disabled.

3fill in blank

hard

Fix the error in the code to correctly style the disabled input field.

Tailwind

<input type="text" class="border p-2 rounded [1]" disabled />

Drag options to blanks, or click blank then click option'

Adisable:border-gray-300 disable:bg-gray-100

Bdisable:border-red-500 disable:bg-red-100

Cdisabled:border-gray-700 disabled:bg-white

Ddisabled:border-gray-300 disabled:bg-gray-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'disable:' instead of 'disabled:'.

Applying styles without the disabled prefix.

The correct Tailwind prefix for disabled state is disabled:. It applies styles only when the element is disabled.

4fill in blank

hard

Fill both blanks to style a disabled button with faded text and no pointer events.

Tailwind

<button class="bg-green-500 text-white py-2 px-4 rounded disabled:[1] disabled:[2]" disabled>Save</button>

Drag options to blanks, or click blank then click option'

Aopacity-40

Bcursor-not-allowed

Cpointer-events-none

Dunderline

Attempts:

3 left

💡 Hint

Common Mistakes

Using cursor styles instead of pointer-events.

Not applying both styles for full disabled effect.

opacity-40 makes the button look faded, and pointer-events-none disables mouse interactions when disabled.

5fill in blank

hard

Fill all three blanks to style a disabled input with gray border, light background, and no text selection.

Tailwind

<input type="text" class="border-2 rounded p-2 disabled:[1] disabled:[2] disabled:[3]" disabled />

Drag options to blanks, or click blank then click option'

Aborder-gray-400

Bbg-gray-200

Cselect-none

Dtext-red-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using bright colors for disabled input.

Forgetting to disable text selection.

When disabled, the input has a gray border (border-gray-400), a light gray background (bg-gray-200), and text selection is disabled (select-none).