Why reusable patterns matter in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a reusable button style using Tailwind CSS.

Tailwind

<button class="[1]">Click me</button>

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

Ap-1

Btext-center

Cbg-red-500

Dbtn-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using utility classes like p-1 alone instead of a reusable pattern.

Choosing layout classes like text-center which don't style buttons.

The class btn-primary is a reusable pattern for buttons that applies consistent styling.

2fill in blank

medium

Complete the code to reuse a card component style with Tailwind CSS.

Tailwind

<div class="[1] p-4 rounded shadow">Content</div>

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

Abg-blue-100

Bcard

Ctext-lg

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using only utility classes like bg-blue-100 without a reusable pattern.

Choosing layout classes like flex which don't represent a card style.

The card class is a reusable pattern that groups common styles for card components.

3fill in blank

hard

Fix the error in the code by choosing the correct reusable pattern class.

Tailwind

<nav class="navbar [1]">Menu</nav>

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

Anav-primary

Btext-bold

Cbg-green-300

Dflex-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using utility classes like bg-green-300 which are not reusable patterns.

Choosing unrelated classes like text-bold which is not a valid Tailwind class.

The class nav-primary is a reusable pattern for navigation bars, ensuring consistent style.

4fill in blank

hard

Fill both blanks to create a reusable card with a button inside using Tailwind CSS.

Tailwind

<div class="[1] p-6 rounded-lg shadow-lg">
  <button class="[2]">Submit</button>
</div>

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

Acard

Bbtn-primary

Ctext-center

Dbg-yellow-200

Attempts:

3 left

💡 Hint

Common Mistakes

Using utility classes like text-center or bg-yellow-200 instead of reusable patterns.

Mixing unrelated classes that don't represent components.

The card class styles the container, and btn-primary styles the button as reusable patterns.

5fill in blank

hard

Fill all three blanks to build a reusable header with navigation and a button using Tailwind CSS.

Tailwind

<header class="[1] p-4 bg-gray-100">
  <nav class="[2]">
    <button class="[3]">Login</button>
  </nav>
</header>

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

Aheader-main

Bnav-primary

Cbtn-primary

Dtext-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using utility classes like text-lg which are not reusable patterns.

Mixing unrelated classes that don't represent components.

The header-main class styles the header, nav-primary styles the navigation, and btn-primary styles the button as reusable patterns.