@apply for extracting patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct use of @apply in Tailwind CSS

Which option correctly uses @apply to extract common utility classes into a custom class?

Tailwind

/* Tailwind CSS file */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

A .btn-primary { @apply(bg-blue-500 text-white font-bold py-2 px-4 rounded); }

B .btn-primary { apply: bg-blue-500 text-white font-bold py-2 px-4 rounded; }

C .btn-primary { @apply: bg-blue-500 text-white font-bold py-2 px-4 rounded; }

D .btn-primary { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }

💡 Hint

Remember that @apply is a directive and does not use colons or parentheses.

The @apply directive in Tailwind CSS is used inside CSS rules without a colon or parentheses. Option D shows the correct syntax.

❓ rendering

intermediate

Visual result of using @apply for button styles

Given the CSS below, what will the button look like in the browser?

Tailwind

.btn {
  @apply bg-green-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-green-700;
}
<button class="btn">Click me</button>

A A green button with white bold text, rounded corners, and a darker green hover effect.

B A blue button with white text and square corners, no hover effect.

C A button with default browser styles, no colors or rounding.

D A red button with black text and no hover effect.

💡 Hint

Look at the color classes and hover state applied.

The @apply directive adds the Tailwind utility classes to the .btn class. This results in a green background, white text, rounded corners, and a hover effect that darkens the green.

❓ selector

advanced

Which selector correctly applies @apply to multiple classes?

You want to create a reusable style for both .card and .panel classes using @apply. Which CSS snippet is correct?

A .card, .panel { @apply bg-white shadow-md rounded p-4; }

B .card & .panel { @apply bg-white shadow-md rounded p-4; }

C .card .panel { @apply bg-white shadow-md rounded p-4; }

D .card; .panel { @apply bg-white shadow-md rounded p-4; }

💡 Hint

Think about how to select multiple classes in CSS.

Option A correctly uses a comma to select both .card and .panel classes and applies the styles with @apply. Other options use invalid or incorrect selectors.

❓ layout

advanced

Using @apply to create a responsive grid container

Which option correctly uses @apply to create a responsive grid with 3 columns on medium screens and above, and 1 column on small screens?

A .grid-container { @apply grid grid-cols-3 md:grid-cols-1 gap-4; }

B .grid-container { @apply grid grid-cols-1 md:grid-cols-3 gap-4; }

C .grid-container { @apply grid-cols-3 grid-cols-1 md:grid-cols-3 gap-4; }

D .grid-container { @apply grid-cols-1 grid md:grid-cols-3 gap-4; }

💡 Hint

Remember the order and syntax for responsive prefixes in Tailwind.

Option B correctly applies a grid layout with 1 column by default and switches to 3 columns on medium screens using the md: prefix. Other options misuse the order or syntax.

❓ accessibility

expert

Ensuring accessible focus styles with @apply

You want to create a custom button style that includes a visible focus ring for keyboard users using @apply. Which option correctly includes an accessible focus style?

A .btn { @apply bg-blue-600 text-white py-2 px-4 rounded focus:outline-none; }

B .btn { @apply bg-blue-600 text-white py-2 px-4 rounded focus:ring-0; }

C .btn { @apply bg-blue-600 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300; }

D .btn { @apply bg-blue-600 text-white py-2 px-4 rounded; }

💡 Hint

Focus rings help keyboard users see which element is focused.

Option C includes focus:outline-none to remove default outline and adds a visible focus ring with focus:ring-2 focus:ring-blue-300. This ensures the button is accessible for keyboard navigation. Other options remove or omit focus styles.

Practice

1. What is the main purpose of using @apply in Tailwind CSS?

easy

A. To create animations in Tailwind CSS

B. To add JavaScript functionality to Tailwind classes

C. To import external CSS files into Tailwind

D. To combine multiple utility classes into one reusable custom class

Solution

1. Step 1: Understand what @apply does

   @apply lets you write multiple Tailwind utility classes inside a CSS rule to create a single custom class.

2. Step 2: Identify the main use

   This helps reuse styles and keep code tidy by combining utilities into one class.

3. Final Answer:

   To combine multiple utility classes into one reusable custom class -> Option D

4. Quick Check:

   @apply combines utilities = C [OK]

Hint: Remember: @apply bundles utilities into one class [OK]

Common Mistakes:

• Thinking @apply adds JavaScript
• Confusing @apply with animation creation
• Assuming @apply imports CSS files

2. Which of the following is the correct syntax to use @apply inside a CSS file?

easy

A. .btn { @apply text-white bg-blue-500 px-4 py-2; }

B. .btn { apply: text-white bg-blue-500 px-4 py-2; }

C. .btn { @use text-white bg-blue-500 px-4 py-2; }

D. .btn { apply(@text-white, @bg-blue-500); }

Solution

1. Step 1: Recall the correct @apply syntax

   The correct way is to write @apply followed by utility classes inside a CSS rule block.

2. Step 2: Check each option

   Only .btn { @apply text-white bg-blue-500 px-4 py-2; } uses @apply correctly with utility classes separated by spaces.

3. Final Answer:

   .btn { @apply text-white bg-blue-500 px-4 py-2; } -> Option A

4. Quick Check:

   Correct @apply syntax = A [OK]

Hint: Look for '@apply' keyword followed by utilities inside braces [OK]

Common Mistakes:

• Using 'apply:' instead of '@apply'
• Using '@use' or other incorrect keywords
• Trying to call @apply like a function

3. Given this CSS code using @apply:

.card {
  @apply p-6 bg-white rounded-lg shadow-md;
}

What visual styles will the .card class have?

medium

A. No padding, transparent background, rounded corners, and large shadow

B. Padding of 6px, black background, square corners, and no shadow

C. Padding of 1.5rem, white background, rounded corners, and medium shadow

D. Padding of 6rem, gray background, rounded corners, and small shadow

Solution

1. Step 1: Understand each utility class

   p-6 means padding 1.5rem, bg-white sets white background, rounded-lg adds large rounded corners, shadow-md adds medium shadow.

2. Step 2: Match these styles to options

   Padding of 1.5rem, white background, rounded corners, and medium shadow correctly describes these styles. Others have wrong padding sizes or colors.

3. Final Answer:

   Padding of 1.5rem, white background, rounded corners, and medium shadow -> Option C

4. Quick Check:

   p-6 + bg-white + rounded-lg + shadow-md = A [OK]

Hint: Know Tailwind spacing and color names to decode @apply output [OK]

Common Mistakes:

• Confusing padding units (px vs rem)
• Mixing up background colors
• Misunderstanding shadow sizes

4. What is wrong with this CSS using @apply?

.btn {
  @apply text-white bg-blue-500 px-4 py-2;
  @apply rounded-lg;
  color: red;
}

medium

A. The syntax is invalid because @apply must be last

B. Multiple @apply statements should be combined into one

C. The color property conflicts with @apply and causes error

D. You cannot use @apply with padding classes

Solution

1. Step 1: Check usage of multiple @apply

   Tailwind allows multiple @apply but best practice is to combine them for clarity and to avoid duplication.

2. Step 2: Analyze other options

   @apply works with padding, color property is valid CSS and does not cause error, and @apply can be anywhere inside the rule.

3. Final Answer:

   Multiple @apply statements should be combined into one -> Option B

4. Quick Check:

   Combine @apply classes for cleaner CSS = D [OK]

Hint: Combine all utilities in one @apply for neat CSS [OK]

Common Mistakes:

• Thinking @apply can't be used multiple times
• Assuming color property conflicts with @apply
• Believing @apply must be last in CSS block

5. You want to create a reusable button style in Tailwind using @apply that has white text, blue background, padding, rounded corners, and a hover effect that darkens the background. Which CSS snippet correctly achieves this?

hard

A. .btn {
@apply text-white bg-blue-500 px-4 py-2 rounded;
&:hover { @apply bg-blue-700; }
}

B. .btn {
@apply text-white bg-blue-500 px-4 py-2 rounded hover:bg-blue-700;
}

C. .btn {
@apply text-white bg-blue-500 px-4 py-2 rounded;
:hover { @apply bg-blue-700; }
}

D. .btn {
@apply text-white bg-blue-500 px-4 py-2 rounded;
hover: { @apply bg-blue-700; }
}

Solution

1. Step 1: Understand hover styling with @apply

   To apply hover styles with @apply, you must nest inside a CSS hover selector like &:hover in your CSS.

2. Step 2: Check each option's hover syntax

   .btn { @apply text-white bg-blue-500 px-4 py-2 rounded; &:hover { @apply bg-blue-700; } } correctly uses &:hover { @apply bg-blue-700; }. .btn { @apply text-white bg-blue-500 px-4 py-2 rounded hover:bg-blue-700; } tries to use hover:bg-blue-700 inside @apply which is invalid. Options C and D have incorrect hover selector syntax.

3. Final Answer:

   .btn { @apply text-white bg-blue-500 px-4 py-2 rounded; &:hover { @apply bg-blue-700; } } -> Option A

4. Quick Check:

   Use &:hover with @apply for hover styles = B [OK]

Hint: Use &:hover { @apply ... } for hover styles in CSS [OK]

Common Mistakes:

• Trying to use hover: prefix inside @apply
• Using :hover without & in nested CSS
• Incorrect hover selector syntax causing errors