Disabled state styling in Tailwind - Mini Project: Build & Apply

Disabled State Styling with Tailwind CSS

📖 Scenario: You are building a simple web form with a button that can be disabled based on a condition. Disabled buttons should look different to show users they cannot click them.

🎯 Goal: Create a button styled with Tailwind CSS that changes appearance when disabled. The button should have a blue background and white text when enabled, and a gray background with lighter text when disabled.

📋 What You'll Learn

Use Tailwind CSS classes to style the button

Add a disabled attribute to the button to control its state

Use Tailwind's disabled: variant to style the disabled state

Ensure the button is accessible with proper aria attributes

💡 Why This Matters

🌍 Real World

Buttons are common in web forms and interfaces. Styling disabled buttons clearly helps users understand when actions are unavailable.

💼 Career

Front-end developers must create accessible and visually clear interactive elements using CSS frameworks like Tailwind.

1

Create a basic button element

Write an HTML <button> element with the text Submit. Do not add any classes or attributes yet.

Tailwind

Submit

Need a hint?

Start by writing a simple button with the text 'Submit'.

2

Add Tailwind classes for enabled button styling

Add Tailwind CSS classes bg-blue-600, text-white, px-4, py-2, and rounded to the <button> element to style it with a blue background, white text, padding, and rounded corners.

Tailwind

Submit

Need a hint?

Use Tailwind classes to style the button with blue background and white text.

3

Add the disabled attribute and disabled state styling

Add the disabled attribute to the <button> element. Then add Tailwind classes disabled:bg-gray-400 and disabled:text-gray-200 to style the button with a gray background and lighter text when disabled.

Tailwind

Submit

Need a hint?

Add the disabled attribute and use Tailwind's disabled: variant classes to style the disabled state.

4

Add accessibility attributes for disabled button

Add the aria-disabled="true" attribute to the <button> element to improve accessibility by indicating the button is disabled.

Tailwind

Submit

Need a hint?

Use aria-disabled="true" to tell assistive technologies the button is disabled.