Hidden and visibility control in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS class hidden do?

The <code>hidden</code> class completely hides an element by setting <code>display: none;</code>. The element is removed from the page layout and is not visible or accessible.

beginner

How does the Tailwind class invisible differ from hidden?

The <code>invisible</code> class makes an element invisible but it still takes up space in the layout. It sets <code>visibility: hidden;</code>, so the element is hidden but the space it occupies remains.

intermediate

Which Tailwind class would you use to hide an element only on small screens but show it on medium and larger screens?

You can use hidden sm:block. This hides the element on small screens (<640px) and shows it as a block on screens medium and larger (≥640px).

intermediate

What is the effect of using opacity-0 in Tailwind CSS?

The <code>opacity-0</code> class makes the element fully transparent but it remains visible to screen readers and still occupies space. It sets <code>opacity: 0;</code>.

advanced

Why is it important to use semantic visibility classes like hidden or invisible instead of just setting display: none; in CSS directly?

Using Tailwind classes keeps your code consistent and easier to maintain. It also helps with responsive design by combining visibility control with breakpoints. Plus, Tailwind classes are optimized and easy to read.

What does the Tailwind class hidden do?

A Hides the element but keeps its space

B Makes the element transparent but still clickable

C Removes the element from the layout and hides it

D Changes the element's color to transparent

hidden sets display: none;, removing the element from layout and hiding it.

Which class hides an element but keeps its space reserved?

A invisible

B hidden

C opacity-0

D block

invisible sets visibility: hidden;, hiding the element but keeping its space.

How do you hide an element on small screens but show it on medium and larger screens in Tailwind?

A hidden md:block

B opacity-0 sm:block

C invisible lg:block

D hidden sm:block

hidden sm:block hides on small screens and shows on medium (sm) and larger.

What does opacity-0 do in Tailwind CSS?

A Makes the element fully transparent but still present

B Hides the element and removes it from layout

C Makes the element invisible but clickable

D Removes the element from the DOM

opacity-0 sets opacity to zero, making the element transparent but still occupying space.

Why use Tailwind's visibility classes instead of custom CSS?

A Tailwind classes are harder to read

B Tailwind classes help with responsive design and consistency

C Custom CSS is always better

D Tailwind classes do not support responsive design

Tailwind classes make code consistent, easier to maintain, and support responsive visibility control.

Explain the difference between the Tailwind classes hidden and invisible.

Think about whether the element still takes up space on the page.

How can you use Tailwind classes to control element visibility responsively?

Consider how Tailwind handles responsive design with prefixes.