Class conflict resolution strategies in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Tailwind CSS resolve conflicting utility classes?

In Tailwind CSS, when two utility classes conflict (for example, bg-red-500 and bg-blue-500 applied to the same element), how does the browser decide which style to apply?

A The last class listed in the HTML element's class attribute takes precedence due to CSS cascading rules.

B Tailwind automatically merges conflicting classes and creates a new combined class.

C Tailwind uses JavaScript to dynamically remove conflicting classes at runtime.

D The first class listed in the HTML element's class attribute always overrides the others.

💡 Hint

Think about how CSS applies styles when multiple rules target the same property.

In CSS, when multiple rules apply to the same property, the one that appears last in the stylesheet or inline style wins. Tailwind generates utility classes as normal CSS classes, so when multiple conflicting classes are applied, the browser uses the last one listed in the class attribute.

📝 Syntax

intermediate

Which Tailwind class order produces a blue background?

Given this HTML element: <div class="bg-red-500 bg-blue-500">Hello</div>, what background color will the element have when rendered in the browser?

A Purple background

B Red background

C No background color

D Blue background

💡 Hint

Remember the order of classes affects which style applies.

The browser applies CSS rules in order. Since bg-blue-500 comes after bg-red-500 in the class list, the blue background overrides the red.

❓ selector

advanced

How to override Tailwind utility with custom CSS?

You have a button with class text-green-600 from Tailwind. You want to override its text color to red using your own CSS. Which CSS selector will correctly override the Tailwind style?

A button.text-green-600 { color: red; }

B .text-green-600 { color: red; }

C .text-green-600 { color: red !important; }

D button { color: red; }

💡 Hint

Tailwind utilities have high specificity; you may need to increase specificity or use !important.

Tailwind utility classes have specific CSS rules. To override them without changing HTML, you can use the same class selector with !important to force your style to apply.

❓ layout

advanced

What happens when conflicting flexbox classes are applied?

Consider this element: <div class="flex flex-col flex-row">Content</div>. What will be the layout direction of the flex container?

A The flex container will arrange children in a column (vertical).

B The flex container will arrange children in a row (horizontal).

C The flex container will not apply any flex layout.

D The layout will be broken and children will overlap.

💡 Hint

Check which class comes last and what CSS property it sets.

Both flex-col and flex-row set the flex-direction property. Since flex-row is last, it overrides flex-col, so children arrange in a row.

❓ accessibility

expert

How to resolve conflicting focus ring styles in Tailwind?

You have a button with classes focus:ring-2 focus:ring-blue-500 focus:ring-offset-4 focus:ring-offset-red-300. Which focus ring color and offset will the button show when focused?

A A blue ring with a red offset around the button.

B A red ring with a blue offset around the button.

C No visible focus ring due to conflict.

D A default browser focus ring ignoring Tailwind classes.

💡 Hint

Focus ring color and offset are controlled by separate classes that do not conflict.

The focus:ring-2 sets ring thickness, focus:ring-blue-500 sets ring color, focus:ring-offset-4 sets offset size, and focus:ring-offset-red-300 sets offset color. These classes complement each other, so the button shows a blue ring with a red offset.

Practice

1. In Tailwind CSS, when two classes conflict by setting the same CSS property, which class takes effect?

easy

A. The last class listed in the class attribute

B. The first class listed in the class attribute

C. Both classes apply their styles together

D. Tailwind throws an error for conflicting classes

Solution

1. Step 1: Understand Tailwind class conflict behavior

   Tailwind applies CSS classes in the order they appear in the HTML class attribute.

2. Step 2: Identify which class overrides

   The last class that sets the same CSS property overrides earlier ones.

3. Final Answer:

   The last class listed in the class attribute -> Option A

4. Quick Check:

   Last class wins = C [OK]

Hint: Remember: last class for same property wins in Tailwind [OK]

Common Mistakes:

• Thinking the first class always applies
• Believing conflicting classes combine styles
• Assuming Tailwind errors on conflicts

2. Which of the following is the correct way to apply a red background on small screens and a blue background on medium screens using Tailwind?

easy

A. md:bg-red-500 bg-blue-500

B. bg-red-500 bg-blue-500 md:

C. bg-red-500 md:bg-blue-500

D. bg-red-500 md:bg-red-500 bg-blue-500

Solution

1. Step 1: Understand responsive prefixes in Tailwind

   Use prefixes like md: to apply styles at specific screen sizes.

2. Step 2: Apply red background by default and blue on medium screens

   bg-red-500 applies red always; md:bg-blue-500 overrides it on medium screens.

3. Final Answer:

   <code>bg-red-500 md:bg-blue-500</code> -> Option C

4. Quick Check:

   Responsive prefix changes style at breakpoint = B [OK]

Hint: Use responsive prefixes before classes to override at breakpoints [OK]

Common Mistakes:

• Placing responsive prefix after the class
• Repeating same class without prefix
• Incorrect order causing no override

3. What background color will a div have when rendered with this class attribute?
class="bg-green-400 bg-red-500 hover:bg-blue-600"
Assume the user is not hovering.

medium

A. Green background

B. Red background

C. Blue background

D. No background color

Solution

1. Step 1: Identify conflicting background classes

   There are two background classes: bg-green-400 and bg-red-500.

2. Step 2: Determine which class applies

   Since bg-red-500 comes after bg-green-400, it overrides the green background.

3. Step 3: Consider hover state

   User is not hovering, so hover:bg-blue-600 does not apply.

4. Final Answer:

   Red background -> Option B

5. Quick Check:

   Last non-hover background class applies = A [OK]

Hint: Last background class wins unless hover state active [OK]

Common Mistakes:

• Choosing green because it appears first
• Choosing blue without hover
• Ignoring class order

4. You wrote this Tailwind class string:
class="text-lg text-sm md:text-xl text-md"
But the text size is not what you expect on medium screens. What is the problem?

medium

A. The text-md class overrides md:text-xl because it comes last

B. The md: prefix is invalid and ignored

C. Tailwind does not support multiple text size classes

D. The text-sm class should come after text-lg

Solution

1. Step 1: Analyze class order and prefixes

   The classes are text-lg, text-sm, md:text-xl, and text-md in that order.

2. Step 2: Understand how Tailwind applies classes

   On medium screens, md:text-xl applies, but text-md comes after and overrides it because it has no prefix.

3. Final Answer:

   The text-md class overrides md:text-xl because it comes last -> Option A

4. Quick Check:

   Unprefixed class after prefixed overrides = D [OK]

Hint: Place responsive classes last to avoid being overridden [OK]

Common Mistakes:

• Thinking md: prefix is invalid
• Believing Tailwind forbids multiple text sizes
• Ignoring class order importance

5. You want a button that is green normally, turns red on hover, and becomes blue on medium screens but still turns red on hover at medium size. Which class string correctly resolves these conflicts?

hard

A. hover:bg-red-500 bg-green-500 md:bg-blue-500 md:hover:bg-red-500

B. bg-green-500 md:bg-blue-500 hover:bg-red-500 md:hover:bg-red-500

C. bg-green-500 hover:bg-red-500 md:hover:bg-red-500 md:bg-blue-500

D. bg-green-500 hover:bg-red-500 md:bg-blue-500 md:hover:bg-red-500

Solution

1. Step 1: Identify required styles and their order

   Normal: green background (bg-green-500), hover: red (hover:bg-red-500), medium: blue (md:bg-blue-500), medium hover: red (md:hover:bg-red-500).

2. Step 2: Check class order for correct overrides

   The order must be normal green, then hover red, then medium blue, then medium hover red last to ensure correct overrides.

3. Step 3: Verify bg-green-500 hover:bg-red-500 md:bg-blue-500 md:hover:bg-red-500 matches this order

   bg-green-500 hover:bg-red-500 md:bg-blue-500 md:hover:bg-red-500 lists classes in this exact order, so it resolves conflicts correctly.

4. Final Answer:

   <code>bg-green-500 hover:bg-red-500 md:bg-blue-500 md:hover:bg-red-500</code> -> Option D

5. Quick Check:

   Order: normal, hover, medium, medium hover = A [OK]

Hint: Order classes: base, hover, responsive, responsive hover [OK]

Common Mistakes:

• Placing hover after responsive classes incorrectly
• Mixing order causing hover not to apply on medium
• Omitting md:hover class