Responsive utility overrides in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class will make text red on small screens but blue on medium screens?

You want the text color to be red on small screens and blue on medium screens and larger. Which class combination achieves this?

A md:text-red-500 text-blue-500

B text-red-500 md:text-blue-500

C text-red-500 text-blue-500 md:text-blue-500

D text-blue-500 md:text-red-500

💡 Hint

Remember that Tailwind applies mobile-first styles, so unprefixed classes apply to all screen sizes unless overridden.

In Tailwind, unprefixed classes apply to all screen sizes. The prefix 'md:' applies styles starting at medium screens. So 'text-red-500 md:text-blue-500' means red text on small screens and blue text on medium and larger.

❓ layout

intermediate

How to make a div full width on mobile but half width on large screens using Tailwind?

You want a <div> to take full width on small screens and half the width on large screens. Which class set achieves this?

A w-full w-1/2 lg:w-1/2

B w-1/2 lg:w-full

C w-full lg:w-1/2

D lg:w-full w-1/2

💡 Hint

Think about mobile-first approach and how prefixes override base styles.

The class 'w-full' sets width to 100% on all screens by default. The 'lg:w-1/2' overrides it to 50% width on large screens and above.

🧠 Conceptual

advanced

What happens if you use conflicting Tailwind classes without responsive prefixes?

Consider the classes text-green-500 and text-red-500 applied together on the same element without any prefixes. What will be the text color?

A The text will be red because the last class overrides the first.

B The text will be a mix of green and red.

C The browser will throw an error due to conflicting classes.

D The text will be green because it appears first.

💡 Hint

CSS applies styles in order, with later rules overriding earlier ones if they have the same specificity.

Tailwind classes generate CSS rules. When two classes set the same property, the one that appears later in the class attribute wins, so the text color will be red.

❓ accessibility

advanced

How to ensure responsive text size changes remain accessible in Tailwind?

You want text to be small on mobile and larger on desktop using Tailwind. Which approach best supports accessibility?

A Use relative sizes like <code>text-base md:text-xl</code> and test with browser zoom and screen readers.

B Use only one text size for all screens to avoid confusion.

C Use fixed pixel sizes like <code>text-sm md:text-lg</code> without considering user preferences.

D Use <code>!important</code> in custom CSS to force sizes regardless of user settings.

💡 Hint

Accessibility means respecting user settings and making text readable on all devices.

Using relative sizes like 'text-base' and 'text-xl' helps maintain readability and respects user zoom and screen reader settings. Testing is important to ensure accessibility.

📝 Syntax

expert

What error occurs if you write this Tailwind class incorrectly: md:text-lg text-base md:text-sm?

Given the classes md:text-lg text-base md:text-sm on an element, what will be the effective text size on medium screens and why?

A This will cause a syntax error in Tailwind and no styles will apply.

B Text size will be large because the first md: class applies and later ones are ignored.

C Text size will be base because unprefixed classes override prefixed ones.

D Text size will be small because the last md: class overrides the previous md: class.

💡 Hint

Later classes override earlier ones if they set the same CSS property and have the same specificity.

Both 'md:text-lg' and 'md:text-sm' apply at medium screens. Since 'md:text-sm' comes last, it overrides 'md:text-lg', so text size is small on medium screens.

Practice

1. What does the md:bg-red-500 class do in Tailwind CSS?

easy

A. It applies a red background only on medium screens and larger.

B. It applies a red background on all screen sizes.

C. It applies a red background only on small screens.

D. It applies a red background only on large screens.

Solution

1. Step 1: Understand the prefix md:

   The md: prefix in Tailwind means the style applies starting from medium screen sizes (usually 768px and up).

2. Step 2: Apply the utility with the prefix

   The utility bg-red-500 sets the background color to red. With md:, it only applies on medium and larger screens.

3. Final Answer:

   It applies a red background only on medium screens and larger. -> Option A

4. Quick Check:

   Prefix md: = medium and up [OK]

Hint: Remember prefixes apply styles from that screen size up [OK]

Common Mistakes:

• Thinking md: applies on all screen sizes
• Confusing md: with sm: or lg:
• Assuming it applies only on medium screens, not larger

2. Which of the following is the correct way to apply a blue text color only on large screens using Tailwind?

easy

A. text-blue-500 lg:

B. text-lg-blue-500

C. lg:text-blue-500

D. blue-lg-text-500

Solution

1. Step 1: Identify the correct prefix syntax

   In Tailwind, responsive prefixes come before the utility, separated by a colon, e.g., lg:.

2. Step 2: Combine prefix with utility

   The correct format is lg:text-blue-500 to apply blue text on large screens and up.

3. Final Answer:

   lg:text-blue-500 -> Option C

4. Quick Check:

   Prefix + utility = lg:text-blue-500 [OK]

Hint: Prefix always goes before utility with a colon [OK]

Common Mistakes:

• Placing prefix after the utility
• Combining prefix and utility without colon
• Using incorrect order or spelling

3. Given this HTML snippet:

<div class="bg-green-200 md:bg-yellow-300 lg:bg-red-400">Box</div>

What background color will the box have on a screen width of 800px?

medium

A. Green (bg-green-200)

B. Yellow (md:bg-yellow-300)

C. Red (lg:bg-red-400)

D. No background color

Solution

1. Step 1: Determine screen size category for 800px

   800px is between medium (768px) and large (1024px) screen sizes.

2. Step 2: Check which background color applies

   Base bg-green-200 applies always. md:bg-yellow-300 overrides from 768px up. lg:bg-red-400 applies from 1024px up, so not yet active.

3. Final Answer:

   Yellow (md:bg-yellow-300) -> Option B

4. Quick Check:

   800px = medium range, so md: styles apply [OK]

Hint: Check screen width against prefix breakpoints [OK]

Common Mistakes:

• Choosing base color ignoring overrides
• Assuming large styles apply before 1024px
• Confusing order of overrides

4. Identify the error in this Tailwind class usage:

<div class="sm:bg-blue-200 md:bg-green-300 sm:bg-red-400">Content</div>

medium

A. No error, this is valid Tailwind syntax

B. Missing colon after md

C. Incorrect color names used

D. Duplicate sm: prefixes with conflicting colors

Solution

1. Step 1: Look for repeated prefixes

   The class list has two sm: prefixed background colors: sm:bg-blue-200 and sm:bg-red-400.

2. Step 2: Understand conflict in overrides

   Both apply at small screen sizes, but only one can take effect. The last one sm:bg-red-400 will override the first, making the first redundant or confusing.

3. Final Answer:

   Duplicate sm: prefixes with conflicting colors -> Option D

4. Quick Check:

   Duplicate prefixes cause override conflicts [OK]

Hint: Avoid repeating same prefix with different utilities [OK]

Common Mistakes:

• Ignoring duplicate prefixes
• Thinking multiple same prefixes combine
• Assuming missing colon error

5. You want a button that is green on small screens, yellow on medium, and red on large screens. Which Tailwind class list achieves this correctly?

hard

A. bg-green-500 md:bg-yellow-500 lg:bg-red-500

B. bg-green-500 lg:bg-yellow-500 md:bg-red-500

C. md:bg-green-500 bg-yellow-500 lg:bg-red-500

D. lg:bg-green-500 md:bg-yellow-500 bg-red-500

Solution

1. Step 1: Assign base color for smallest screens

   Base utility without prefix applies to all screens by default, so bg-green-500 sets green on small screens.

2. Step 2: Override colors for medium and large screens

   md:bg-yellow-500 applies yellow from medium screens up, and lg:bg-red-500 applies red from large screens up, overriding previous colors.

3. Step 3: Check order and prefixes

   The order and prefixes in bg-green-500 md:bg-yellow-500 lg:bg-red-500 correctly apply colors in increasing screen sizes.

4. Final Answer:

   bg-green-500 md:bg-yellow-500 lg:bg-red-500 -> Option A

5. Quick Check:

   Base + md: + lg: overrides = correct responsive colors [OK]

Hint: Base style first, then ascending prefixes for overrides [OK]

Common Mistakes:

• Mixing prefix order incorrectly
• Placing larger screen prefixes before smaller
• Not setting base style for smallest screens