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.

Practice

1. What does the Tailwind class md:hidden do to an element?

easy

A. Hides the element on medium and larger screens

B. Shows the element only on medium screens

C. Hides the element on all screen sizes

D. Shows the element on all screen sizes

Solution

1. Step 1: Understand the prefix md:

   The prefix md: applies styles starting from medium screen sizes (≥768px).

2. Step 2: Interpret the hidden class

   The hidden class hides the element by setting display: none.

3. Final Answer:

   Hides the element on medium and larger screens -> Option A

4. Quick Check:

   md:hidden means hide on medium+ screens [OK]

Hint: Remember: prefix means from that size and up [OK]

Common Mistakes:

• Thinking it hides only on medium screen, not larger
• Confusing hidden with block
• Ignoring the screen size prefix effect

2. Which Tailwind class combination correctly hides an element on small screens but shows it on large screens?

easy

A. block sm:hidden

B. sm:block hidden

C. lg:hidden block

D. hidden lg:block

Solution

1. Step 1: Analyze hidden lg:block

   This means the element is hidden by default (small screens) and becomes block (visible) on large screens (≥1024px).

2. Step 2: Check other options

   block sm:hidden shows below sm but hides from sm upwards (very small screens only). lg:hidden block hides on large screens, opposite of requirement. sm:block hidden shows on sm+ but hidden by default, which is contradictory.

3. Final Answer:

   hidden lg:block -> Option D

4. Quick Check:

   Hide default, show large = hidden lg:block [OK]

Hint: Default hidden, then show with large prefix [OK]

Common Mistakes:

• Mixing order of classes causing unexpected visibility
• Using wrong screen prefix for large screens
• Assuming sm means large screen

3. Given this HTML snippet:

<div class="hidden md:block lg:hidden">Content</div>

On which screen sizes will the content be visible?

medium

A. Only on medium screens (≥768px and <1024px)

B. Only on large screens (≥1024px)

C. On all screen sizes

D. Never visible

Solution

1. Step 1: Interpret classes in order

   hidden hides by default (small screens). md:block shows block from medium (≥768px). lg:hidden hides again from large (≥1024px).

2. Step 2: Determine visible range

   Visible only between medium (768px) and before large (1024px) because it is block there but hidden outside.

3. Final Answer:

   Only on medium screens (≥768px and <1024px) -> Option A

4. Quick Check:

   Visible only between md and lg breakpoints [OK]

Hint: Check each prefix range and last applied class [OK]

Common Mistakes:

• Assuming visible on large screens despite lg:hidden
• Ignoring default hidden class
• Confusing screen size ranges

4. This code is intended to show a button only on large screens but it shows on all screens:

<button class="block lg:block">Click Me</button>

What is the error?

medium

A. The block class overrides sm:hidden on larger screens

B. The sm:hidden class hides on small screens instead of showing

C. Missing hidden class for default state

D. The order of classes should be reversed

Solution

1. Step 1: Understand default visibility

   The button has block by default, so it shows on all screens initially.

2. Step 2: Analyze lg:block

   This shows the button on large screens and above (≥1024px), but default is visible everywhere, so it shows everywhere.

3. Step 3: Fix by adding hidden default

   To show only on large screens (≥1024px), default should be hidden and lg:block to show on large. The code is missing the default hidden.

4. Final Answer:

   Missing hidden class for default state -> Option C

5. Quick Check:

   Default hidden, then show large = add hidden [OK]

Hint: Default hidden, then show on large with lg:block [OK]

Common Mistakes:

• Assuming lg:block hides screens below large
• Not setting default visibility correctly
• Thinking class order affects visibility

5. You want a navigation menu that is hidden on small screens, visible as a block on medium screens, and hidden again on extra-large screens. Which Tailwind class set achieves this?

hard

A. md:hidden block xl:block

B. hidden md:block xl:hidden

C. hidden sm:block lg:hidden

D. block md:hidden xl:block

Solution

1. Step 1: Break down requirements

   Hidden on small screens (default), visible block on medium (≥768px), hidden again on extra-large (≥1280px).

2. Step 2: Match classes to requirements

   hidden hides by default (small). md:block shows block from medium. xl:hidden hides again from extra-large.

3. Step 3: Verify other options

   block md:hidden xl:block shows block by default, wrong. hidden sm:block lg:hidden uses sm and lg, not medium and extra-large. md:hidden block xl:block hides from medium, opposite of requirement.

4. Final Answer:

   hidden md:block xl:hidden -> Option B

5. Quick Check:

   Hide default, show md, hide xl = hidden md:block xl:hidden [OK]

Hint: Chain visibility classes with correct breakpoints [OK]

Common Mistakes:

• Mixing breakpoint prefixes
• Forgetting default visibility
• Using wrong order of classes