Why reusable patterns matter in Tailwind - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use reusable CSS patterns?

Which of the following is the main benefit of using reusable CSS patterns like Tailwind utility classes?

A They force you to write inline styles instead of classes.

B They make the website load slower because of extra CSS files.

C They reduce the amount of CSS code you write and help keep styles consistent across the site.

D They prevent you from customizing colors or fonts.

💡 Hint

Think about how repeating the same styles in many places can be simplified.

Reusable CSS patterns help you write less code and keep your design consistent. Tailwind's utility classes are small reusable pieces that you can combine to style elements quickly.

📝 Syntax

intermediate

Identify the correct Tailwind class usage

Which option correctly applies Tailwind classes to create a blue button with white text and padding?

A <button class="bg-blue-500 text-white p-4">Click me</button>

B <button class="blue-bg white-text padding-4">Click me</button>

C <button class="background-blue text-white padding-4">Click me</button>

D <button class="bg-blue text-white padding4">Click me</button>

💡 Hint

Tailwind uses specific class names like bg-color and p for padding.

Tailwind uses utility classes like bg-blue-500 for background color, text-white for text color, and p-4 for padding. Other options use invalid class names.

❓ layout

advanced

What layout does this Tailwind code create?

Given this HTML snippet, what layout will it produce in the browser?

<div class="flex justify-center items-center h-screen">
  <div class="w-1/2 p-6 bg-gray-200">Content</div>
</div>

A A container aligned to the top-left with content taking full width and no padding.

B A full screen container with content centered horizontally and vertically, content box half the screen width with padding and gray background.

C A vertical stack of two boxes with equal width and no background color.

D A container with content aligned to bottom-right and no background color.

💡 Hint

Look at the flex and justify-center, items-center classes.

The flex container with justify-center and items-center centers the child horizontally and vertically. The child div has half width (w-1/2), padding (p-6), and a gray background (bg-gray-200).

❓ accessibility

advanced

Improving accessibility with Tailwind

Which option best improves accessibility for a button styled with Tailwind classes?

A Use <code>hidden</code> class to hide the button from screen readers.

B Add <code>focus:outline-none</code> to remove focus outline for a cleaner look.

C Use only color changes on hover without focus styles.

D Add <code>aria-label</code> describing the button’s action and use <code>focus:ring</code> classes for visible focus.

💡 Hint

Think about how keyboard users know which element is focused.

Accessibility means everyone can use your site. Adding aria-label helps screen readers understand the button. Using focus:ring shows a visible focus outline for keyboard users. Removing outlines or hiding buttons harms accessibility.

❓ selector

expert

Which Tailwind selector applies styles only on screens wider than 768px?

You want to apply padding only on medium and larger screens (min-width 768px). Which Tailwind class prefix should you use?

A md:p-6

B sm:p-6

C lg:p-6

D xl:p-6

💡 Hint

Tailwind uses sm, md, lg, xl for different screen sizes.

The md: prefix applies styles at the medium breakpoint, which is 768px and above by default. sm: is smaller screens, lg: and xl: are larger breakpoints.