Hidden and visibility control in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will be visible in the browser?

Given the following HTML snippet styled with Tailwind CSS, which text will be visible when rendered in a browser?

Tailwind

<div class="hidden md:block">Hello</div><div class="block md:hidden">World</div>

A Only 'Hello' is visible on medium and larger screens

B Only 'World' is visible on medium and larger screens

C Both 'Hello' and 'World' are visible on all screen sizes

D Neither 'Hello' nor 'World' is visible on any screen size

💡 Hint

Think about how Tailwind's responsive prefixes like md: affect visibility classes.

The hidden class hides the element on all screen sizes. The md:block class makes the element visible as a block starting from medium screens (768px and up). So the first div is hidden on small screens but visible on medium and larger screens.

The second div uses block by default but md:hidden hides it on medium and larger screens. So it is visible only on small screens.

❓ selector

intermediate

Which Tailwind class hides an element but keeps its space?

In Tailwind CSS, which class hides an element visually but still keeps its space in the layout?

A invisible

B hidden

C opacity-0

D sr-only

💡 Hint

Consider the difference between removing an element from layout vs making it transparent.

The invisible class makes the element transparent but it still occupies space in the layout.

The hidden class removes the element from the layout entirely.

opacity-0 makes the element fully transparent but it can still respond to events.

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

🧠 Conceptual

advanced

What is the effect of combining 'hidden' and 'sr-only' classes?

If an element has both hidden and sr-only classes in Tailwind CSS, what will be the result?

A The element is hidden visually but accessible to screen readers

B The element is visible visually but hidden from screen readers

C The element is hidden visually and from screen readers

D The element is visible both visually and to screen readers

💡 Hint

Consider which class takes precedence and what each class does.

The hidden class applies display: none;, which hides the element visually and removes it from the accessibility tree, so screen readers cannot access it.

The sr-only class hides the element visually but keeps it accessible to screen readers.

When combined, hidden overrides sr-only, so the element is hidden both visually and from screen readers.

❓ layout

advanced

How does 'invisible' affect layout compared to 'hidden'?

Consider two divs styled with Tailwind CSS: one with invisible and one with hidden. How do they differ in layout behavior?

A Both remove the element from the layout flow

B <code>invisible</code> keeps space, <code>hidden</code> removes space

C <code>hidden</code> keeps space, <code>invisible</code> removes space

D Both keep the element visible but transparent

💡 Hint

Think about how CSS display and visibility properties affect layout.

invisible sets visibility: hidden;, which hides the element visually but keeps its space in the layout.

hidden sets display: none;, which removes the element from the layout flow entirely, so no space is reserved.

❓ accessibility

expert

Which Tailwind class combination ensures an element is hidden visually but accessible to screen readers and keyboard navigation?

You want to hide a button visually but keep it accessible to screen readers and keyboard users. Which Tailwind CSS class or combination achieves this?

A hidden

B invisible focusable

C opacity-0 pointer-events-none

D sr-only

💡 Hint

Consider the purpose of the sr-only class and how it affects accessibility.

The sr-only class hides the element visually but keeps it accessible to screen readers and keyboard navigation.

hidden removes the element from the accessibility tree.

invisible hides visually but does not guarantee keyboard accessibility.

opacity-0 pointer-events-none hides visually and disables interaction, so keyboard users cannot access it.