Practice - 5 Tasks
Answer the questions below
1fill in blank
easyComplete the code to apply padding and background color using Tailwind's @apply.
Tailwind
.btn {
@apply [1];
} Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using unrelated utilities like text alignment or flexbox.
Forgetting to separate utilities with spaces.
✗ Incorrect
The @apply directive lets you reuse Tailwind utility classes. Here, 'p-4 bg-blue-500' applies padding and background color.
2fill in blank
mediumComplete the code to extract common text styles using @apply in a CSS class.
Tailwind
.text-style {
@apply [1];
} Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Choosing layout or spacing utilities instead of text styles.
Mixing unrelated utilities in the @apply directive.
✗ Incorrect
The class applies large text size, semi-bold font, and gray color using Tailwind utilities with @apply.
3fill in blank
hardFix the error in the @apply usage to combine flexbox and spacing utilities.
Tailwind
.container {
@apply [1];
} Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using commas or semicolons to separate utilities.
Writing utilities without spaces.
✗ Incorrect
In @apply, utilities must be space-separated without commas or semicolons.
4fill in blank
hardFill both blanks to create a reusable card style with shadow and padding using @apply.
Tailwind
.card {
@apply [1] [2];
} Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Choosing text alignment or background color instead of shadow or padding.
Mixing unrelated utilities.
✗ Incorrect
The card uses 'shadow-lg' for shadow and 'p-6' for padding, combined with @apply.
5fill in blank
hardFill all three blanks to create a button style with rounded corners, background color, and text color using @apply.
Tailwind
.btn-primary {
@apply [1] [2] [3];
} Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using border utilities instead of rounded corners.
Mixing background and text colors incorrectly.
✗ Incorrect
The button uses 'rounded-md' for corners, 'bg-green-600' for background, and 'text-white' for text color.