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.