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.

Practice

1. Why is it important to use reusable patterns in Tailwind CSS?

easy

A. They require writing more CSS code manually.

B. They make the website load slower.

C. They save time and keep the design consistent across the site.

D. They prevent using Tailwind's utility classes.

Solution

1. Step 1: Understand the purpose of reusable patterns

   Reusable patterns help avoid repeating the same styles and keep the design uniform.

2. Step 2: Connect with Tailwind's approach

   Tailwind encourages using utility classes and reusable styles to speed up development and maintain consistency.

3. Final Answer:

   They save time and keep the design consistent across the site. -> Option C

4. Quick Check:

   Reusable patterns = save time + consistency [OK]

Hint: Reusable means save time and keep design same [OK]

Common Mistakes:

• Thinking reusable patterns slow down the site
• Believing reusable means writing more CSS manually
• Confusing reusable with avoiding Tailwind utilities

2. Which Tailwind CSS feature helps you create reusable style classes?

easy

A. The @apply directive

B. The @import rule

C. The @media query

D. The @font-face rule

Solution

1. Step 1: Identify Tailwind's reusable style feature

   The @apply directive lets you combine utility classes into one reusable class.

2. Step 2: Differentiate from other CSS rules

   @import loads CSS files, @media handles responsiveness, and @font-face loads fonts, none create reusable classes.

3. Final Answer:

   The @apply directive -> Option A

4. Quick Check:

   @apply = reusable styles [OK]

Hint: @apply combines utilities into reusable classes [OK]

Common Mistakes:

• Confusing @apply with @import
• Thinking @media creates reusable classes
• Mixing up CSS font rules with Tailwind features

3. What will be the visual result of this Tailwind CSS code?

<button class="btn-primary p-4">Click Me</button>

/* CSS */
.btn-primary {
  @apply bg-blue-600 text-white rounded-lg;
}

medium

A. A button with blue background, white text, rounded corners, and padding

B. A button with default styles and no color or padding

C. A button with red background and no rounded corners

D. A button with blue text and no background color

Solution

1. Step 1: Understand the @apply usage

   The .btn-primary class applies bg-blue-600, text-white, and rounded-lg styles.

2. Step 2: Combine with padding from HTML

   The button also has p-4 class adding padding around the content.

3. Final Answer:

   A button with blue background, white text, rounded corners, and padding -> Option A

4. Quick Check:

   bg-blue + text-white + rounded + p-4 = styled button [OK]

Hint: @apply adds Tailwind utilities to custom classes [OK]

Common Mistakes:

• Ignoring the padding class p-4
• Thinking @apply changes text color to blue
• Assuming no styles apply without inline utilities

4. Identify the error in this Tailwind CSS snippet using @apply:

.btn {
  @apply bg-green-500 text-white p-3 rounded;
}

.btn {
  @apply bg-red-500;
}

medium

A. You cannot use @apply twice on the same class.

B. The second @apply overrides the first, causing inconsistent styles.

C. Tailwind does not support @apply with color classes.

D. The syntax is invalid because @apply must be inside HTML.

Solution

1. Step 1: Analyze multiple @apply on same class

   Applying @apply twice on .btn means the second overrides the first styles.

2. Step 2: Understand style overriding in CSS

   The second @apply bg-red-500 replaces the green background, causing inconsistency.

3. Final Answer:

   The second @apply overrides the first, causing inconsistent styles. -> Option B

4. Quick Check:

   Multiple @apply on same class = override [OK]

Hint: Multiple @apply on one class overrides earlier styles [OK]

Common Mistakes:

• Thinking multiple @apply are not allowed at all
• Believing @apply cannot use color classes
• Confusing CSS syntax rules with HTML placement

5. You want to create a reusable button style with Tailwind that changes color on hover and has consistent padding. Which approach is best?

hard

A. Write all styles inline in HTML without reusable classes.

B. Create separate classes for padding and hover and never combine them.

C. Use only Tailwind's default button classes without customization.

D. Create a custom class using @apply with base styles and add hover utilities in HTML.

Solution

1. Step 1: Understand reusable pattern goals

   Reusable patterns should combine common styles and allow easy customization like hover effects.

2. Step 2: Evaluate options for combining base and hover styles

   Using @apply for base styles and adding hover utilities in HTML keeps code clean and flexible.

3. Step 3: Reject less efficient approaches

   Writing all inline repeats code, default classes may lack needed styles, and splitting padding and hover separately is less maintainable.

4. Final Answer:

   Create a custom class using @apply with base styles and add hover utilities in HTML. -> Option D

5. Quick Check:

   Reusable base + hover in HTML = best practice [OK]

Hint: Use @apply for base, hover in HTML for flexibility [OK]

Common Mistakes:

• Writing all styles inline causing repetition
• Relying only on default classes without customization
• Separating padding and hover styles unnecessarily