Responsive visibility toggling in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class hides an element only on small screens?

You want an element to be visible on medium and larger screens but hidden on small screens. Which class achieves this?

A md:hidden block

B block md:hidden

C hidden sm:block

D hidden md:block

💡 Hint

Think about when the element should be hidden and when it should show.

The class hidden md:block hides the element by default (small screens) and shows it starting at medium screens.

Other options either hide on medium or show on small incorrectly.

❓ layout

intermediate

What is the visible layout of this code on a large screen?

Given this HTML snippet with Tailwind classes:

<div class="flex flex-col md:flex-row">
  <div class="block md:hidden">A</div>
  <div class="hidden md:block">B</div>
</div>

What will be visible on a large screen (≥ md)?

A Only B is visible, arranged horizontally

B Only A is visible, arranged vertically

C Both A and B are visible, arranged vertically

D Both A and B are visible, arranged horizontally

💡 Hint

Check which elements are hidden or shown at medium breakpoint and the flex direction.

On large screens, md:flex-row arranges children horizontally.

block md:hidden hides A on medium and up, so A is hidden.

hidden md:block shows B on medium and up, so B is visible.

❓ rendering

advanced

What is the visual output on a small screen?

Consider this HTML with Tailwind classes:

<button class="bg-blue-500 text-white p-4 hidden sm:inline-block">Click Me</button>

What will the user see on a small screen (less than 640px wide)?

A The button is hidden and not visible

B The button is visible with blue background and white text

C The button is visible but without background color

D The button is visible but with default inline style

💡 Hint

Look at the hidden and sm:inline-block classes and when they apply.

The hidden class hides the button by default.

The sm:inline-block class makes it visible starting at small screens (≥640px).

On smaller than 640px, the button remains hidden.

❓ accessibility

advanced

Which approach improves accessibility when toggling visibility responsively?

You want to hide content visually on small screens but keep it accessible to screen readers. Which Tailwind class combination is best?

A Use <code>hidden sm:block</code> to hide visually and show on larger screens

B Use <code>sr-only sm:not-sr-only</code> to hide visually but keep accessible on small screens

C Use <code>invisible sm:visible</code> to hide visually but keep layout space

D Use <code>opacity-0 sm:opacity-100</code> to hide visually but keep accessible

💡 Hint

Screen reader only classes help keep content accessible but hidden visually.

sr-only hides content visually but keeps it accessible to screen readers.

sm:not-sr-only makes it visible visually on small and larger screens.

Other options hide content visually but also remove accessibility or keep layout space.

🧠 Conceptual

expert

Why is using hidden md:block preferred over block md:hidden for responsive visibility?

Consider these two Tailwind class patterns:

1. hidden md:block
2. block md:hidden

Why is the first pattern generally better for responsive visibility toggling?

A Because it uses fewer classes and is easier to maintain

B Because it shows content by default and hides it on larger screens, which is better for SEO

C Because it hides content by default and shows it on larger screens, improving load performance and accessibility

D Because it applies visibility changes only on hover, improving user experience

💡 Hint

Think about default visibility and how hiding content early affects accessibility and performance.

Using hidden md:block hides content by default (small screens) and shows it on medium and larger screens.

This approach avoids rendering unnecessary content on small devices, improving performance and accessibility.

The other pattern shows content by default and hides it later, which can cause layout shifts and accessibility issues.