Important modifier for specificity in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text color red using Tailwind CSS with the important modifier.

Tailwind

<p class="[1]text-red-500">This text is red.</p>

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

Aimp:

Bimportant:

C!

D!!

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'important:' or 'imp:' which are not valid Tailwind prefixes.

Using double exclamation marks (!!) which is invalid.

In Tailwind CSS, prefixing a utility with an exclamation mark (!) applies the important modifier, increasing specificity.

2fill in blank

medium

Complete the code to make the background color blue important using Tailwind CSS.

Tailwind

<div class="[1]bg-blue-600 p-4">Important blue background</div>

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

A!

Bimp:

Cimportant:

D!!

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'important:' which is not recognized by Tailwind.

Using double exclamation marks (!!) which is invalid.

The exclamation mark (!) before a Tailwind utility class makes it important, increasing CSS specificity.

3fill in blank

hard

Fix the error in the code to correctly apply the important modifier to the margin utility in Tailwind CSS.

Tailwind

<div class="[1]">Margin with important</div>

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

A!m-8

Bimportant:m-8

Cimp:m-8

D!!m-8

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'important:' prefix which is invalid in Tailwind.

Using double exclamation marks (!!) which is not supported.

The correct way to apply important in Tailwind is prefixing the utility with an exclamation mark (!).

4fill in blank

hard

Fill both blanks to make the padding and text color important using Tailwind CSS.

Tailwind

<section class="[1]p-6 [2]text-green-700">Important padding and text</section>

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

A!

Bimportant:

Dimp:

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'important:' or 'imp:' which are not valid prefixes.

Applying important only to one utility instead of both.

Use '!' before each utility class to apply the important modifier in Tailwind CSS.

5fill in blank

hard

Fill all three blanks to make margin, background color, and font size important using Tailwind CSS.

Tailwind

<div class="[1]m-4 [2]bg-yellow-300 [3]text-xl">Important styles</div>

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

A!

Bimportant:

Dimp:

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'important:' or 'imp:' which are invalid.

Applying important to only some utilities, not all.

Prefix each utility class with '!' to apply the important modifier in Tailwind CSS.