@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.