Button component patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this button look like in the browser?

Given this Tailwind CSS button code, what is the visual style you will see when rendered?

Tailwind

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">Click me</button>

A A transparent button with blue text and no hover effect.

B A red button with white text and rounded corners that becomes darker red on hover.

C A blue button with white text, rounded corners, and a darker blue background on hover.

D A white button with blue text and square corners that changes to light blue on hover.

💡 Hint

Look at the background and text color classes, and the hover prefix.

The class bg-blue-600 sets a medium blue background, text-white makes the text white, rounded adds rounded corners, and hover:bg-blue-700 changes the background to a darker blue when hovered.

❓ selector

intermediate

Which Tailwind class applies padding inside a button?

You want to add vertical and horizontal padding inside a button. Which class correctly adds 0.5rem vertical and 1rem horizontal padding?

A pad-2x4

B p-2-4

C padding-y-2 padding-x-4

D py-2 px-4

💡 Hint

Tailwind uses 'py' for vertical padding and 'px' for horizontal padding.

In Tailwind, 'py-2' means padding-top and padding-bottom of 0.5rem, and 'px-4' means padding-left and padding-right of 1rem.

🧠 Conceptual

advanced

Why use 'focus:outline-none' with 'focus:ring' on buttons?

Consider this button code snippet:

<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">Press</button>

Why is it important to use both 'focus:outline-none' and 'focus:ring' classes together?

A 'focus:outline-none' removes the default focus outline, and 'focus:ring' adds a custom visible ring for accessibility.

B 'focus:outline-none' disables all focus styles, and 'focus:ring' disables hover effects.

C 'focus:outline-none' adds a shadow, and 'focus:ring' removes the shadow on focus.

D 'focus:outline-none' makes the button unclickable, and 'focus:ring' makes it clickable.

💡 Hint

Think about keyboard users and visible focus indicators.

Removing the default outline without adding a visible focus style harms accessibility. Using 'focus:ring' adds a clear ring so keyboard users can see focus.

❓ layout

advanced

How to center a button horizontally and vertically inside a container?

You have a container div and a button inside it. Which Tailwind classes on the container will center the button both horizontally and vertically?

Tailwind

<div class="???">
  <button class="bg-green-500 text-white px-4 py-2 rounded">Submit</button>
</div>

A flex items-center justify-center h-64

B inline-flex items-start justify-end h-64

C grid place-items-start h-64

D block text-center h-64

💡 Hint

Use flexbox to center items both ways.

'flex' makes the container a flexbox, 'items-center' centers vertically, 'justify-center' centers horizontally, and 'h-64' gives height so centering is visible.

❓ accessibility

expert

Which button code is most accessible for screen readers and keyboard users?

Choose the button code that best supports accessibility:

A <button class="p-2">×</button>

B <button aria-label="Close modal" class="p-2">×</button>

C <div role="button" tabindex="0" class="p-2">×</div>

D <span class="p-2" onclick="closeModal()">×</span>

💡 Hint

Consider semantic elements and ARIA labels.

Using a

Practice

1. Which Tailwind class is best to make a button visually indicate it is clickable?

easy

A. cursor-pointer

B. text-center

C. bg-gray-100

D. p-4

Solution

1. Step 1: Understand cursor styles in Tailwind

   The class cursor-pointer changes the mouse cursor to a hand icon, signaling clickability.

2. Step 2: Compare other classes

   text-center centers text, bg-gray-100 sets background color, and p-4 adds padding, none indicate clickability.

3. Final Answer:

   cursor-pointer -> Option A

4. Quick Check:

   Clickable cursor = cursor-pointer [OK]

Hint: Clickable buttons use cursor-pointer class [OK]

Common Mistakes:

• Confusing padding or color classes with clickability
• Using text alignment classes for button behavior
• Ignoring cursor style for user feedback

2. Which of these is the correct Tailwind syntax to create a blue button with white text and rounded corners?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Check Tailwind color and border radius classes

   bg-blue-500 is a valid blue background, text-white sets white text, and rounded adds small rounded corners.

2. Step 2: Identify incorrect syntax in other options

   blue-bg and white-text are not Tailwind classes; bg-blue is incomplete; rounded-full makes fully round shape but text is black, not white.

3. Final Answer:

   <button class='bg-blue-500 text-white rounded'>Click me</button> -> Option C

4. Quick Check:

   Correct Tailwind classes = Click me [OK]

Hint: Use bg-color, text-color, and rounded classes correctly [OK]

Common Mistakes:

• Using non-existent Tailwind class names
• Mixing text colors incorrectly
• Confusing rounded and rounded-full classes

3. What will be the visual effect of this button?

<button class='bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded'>Submit</button>

medium

A. Green button that becomes lighter on hover with normal text and square corners

B. Green button that darkens on hover with white bold text and rounded corners

C. Button with no color change on hover and black text

D. Button with red background and white text

Solution

1. Step 1: Analyze background and hover classes

   bg-green-600 sets a green background; hover:bg-green-700 makes it darker green on hover.

2. Step 2: Check text and shape styling

   text-white sets white text, font-bold makes text bold, rounded adds rounded corners.

3. Final Answer:

   Green button that darkens on hover with white bold text and rounded corners -> Option B

4. Quick Check:

   Hover darkens green, white bold text = Green button that darkens on hover with white bold text and rounded corners [OK]

Hint: Hover:bg-darken-color changes button shade on hover [OK]

Common Mistakes:

• Assuming hover makes color lighter instead of darker
• Ignoring font-bold effect
• Confusing rounded with square corners

4. Identify the error in this Tailwind button code:

<button class='bg-red-500 hover:bg-red-600 text-white rounded p-3 disabled:opacity-50 disabled:pointer-events-none' disabled>Delete</button>

medium

A. The hover:bg-red-600 class will not work when disabled

B. The disabled attribute is missing

C. The pointer-events-none class disables all clicks even when enabled

D. The opacity-50 class is applied incorrectly

Solution

1. Step 1: Understand disabled state styling

   The disabled attribute disables the button, so hover styles do not apply when disabled.

2. Step 2: Analyze hover and disabled interaction

   hover:bg-red-600 works only when button is enabled; when disabled, hover has no effect.

3. Final Answer:

   The hover:bg-red-600 class will not work when disabled -> Option A

4. Quick Check:

   Hover ignored when disabled = The hover:bg-red-600 class will not work when disabled [OK]

Hint: Hover styles don't apply on disabled buttons [OK]

Common Mistakes:

• Thinking disabled attribute is missing
• Believing pointer-events-none disables clicks always
• Misunderstanding opacity-50 usage

5. You want a responsive button that is full width on small screens but auto width on medium and larger screens. Which Tailwind class set achieves this?

hard

A. w-full w-auto md:px-6 py-3 bg-indigo-600 text-white rounded

B. w-auto md:w-full px-6 py-3 bg-indigo-600 text-white rounded

C. w-auto px-6 py-3 bg-indigo-600 text-white rounded md:w-auto

D. w-full md:w-auto px-6 py-3 bg-indigo-600 text-white rounded

Solution

1. Step 1: Understand responsive width classes

   w-full makes button full width; md:w-auto overrides width to auto on medium screens and up.

2. Step 2: Check other classes for correctness

   px-6 py-3 add padding, bg-indigo-600 sets background, text-white sets text color, rounded rounds corners.

3. Final Answer:

   w-full md:w-auto px-6 py-3 bg-indigo-600 text-white rounded -> Option D

4. Quick Check:

   Full width small, auto medium+ = w-full md:w-auto px-6 py-3 bg-indigo-600 text-white rounded [OK]

Hint: Use w-full then md:w-auto for responsive widths [OK]

Common Mistakes:

• Reversing width classes order
• Duplicating width classes without breakpoints
• Misplacing responsive prefixes