Button component patterns in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a primary button in UI design?

A primary button is the main action button on a page. It usually stands out with a strong color to guide users to the most important action.

beginner

How do you create a button with Tailwind CSS that looks disabled?

Use classes like opacity-50 and cursor-not-allowed to show the button is disabled.

beginner

Why use semantic <button> elements instead of <div> for buttons?

Semantic <button> elements are accessible by default. They support keyboard navigation and screen readers, improving usability for all users.

beginner

What Tailwind classes help create a button with a hover effect?

Use classes like hover:bg-blue-700 or hover:text-white to change background or text color when the user hovers over the button.

intermediate

How can you make a button responsive using Tailwind CSS?

Use responsive prefixes like sm:, md:, lg: to adjust padding, font size, or width on different screen sizes.

Which HTML element is best for creating accessible buttons?

A <div>

B <button>

C <span>

D <a>

The

What Tailwind class would you use to make a button's background blue on hover?

A hover:text-blue-500

B text-blue-500

C bg-blue-500

D hover:bg-blue-500

The class hover:bg-blue-500 changes the background color to blue when the user hovers over the button.

How do you visually indicate a disabled button in Tailwind CSS?

A text-red-500

B hover:bg-gray-500

C opacity-50 cursor-not-allowed

D bg-green-500

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

Which Tailwind class helps make a button's text bold?

A font-bold

B text-bold

C font-light

D text-lg

font-bold makes the text inside the button bold.

To make a button wider on medium screens and above, which prefix would you use?

A md:

B sm:

C lg:

D xl:

The md: prefix applies styles starting at medium screen sizes.

Explain how to build an accessible and visually clear button using Tailwind CSS.

Think about accessibility, visual feedback, and states.

Describe how responsive design affects button styling in Tailwind CSS.

Consider how buttons look and behave on phones vs desktops.