Responsive visibility toggling in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does <code>hidden</code> class do in Tailwind CSS?

The <code>hidden</code> class hides an element by setting <code>display: none;</code>, so it is not visible and does not take space on the page.

beginner

How do you make an element visible only on medium screens and larger using Tailwind?

Use hidden md:block. This hides the element by default and shows it as a block on medium (≥768px) screens and larger.

beginner

What is the purpose of responsive prefixes like sm:, md:, lg: in Tailwind?

They apply styles only at or above certain screen widths, allowing you to change visibility or layout depending on device size.

beginner

Explain how to hide an element on small screens but show it on large screens using Tailwind classes.

Use hidden lg:block. The element is hidden by default (small screens) and shown as a block on large screens (≥1024px).

beginner

Why is responsive visibility toggling useful in web design?

It helps show or hide content based on screen size, improving user experience by adapting layout and information to device capabilities.

Which Tailwind class hides an element on all screen sizes?

A block

B visible

C hidden

D inline

The hidden class sets display: none;, hiding the element on all screen sizes.

What does md:hidden do?

A Hides element on medium screens and larger

B Shows element on all screens

C Hides element on small screens only

D Shows element only on medium screens

md:hidden hides the element on medium (≥768px) screens and larger.

How to make an element visible only on small screens using Tailwind?

A block md:hidden

B block sm:hidden

C hidden sm:block

D hidden md:block

Use block md:hidden to show on small screens and hide on medium and larger.

Which prefix applies styles starting at 1024px screen width?

A md:

B lg:

C sm:

D xl:

lg: applies styles at large screens, starting at 1024px width.

Why use responsive visibility toggling?

A To make all content visible always

B To hide content permanently

C To change font size only

D To adapt content visibility based on device size

Responsive visibility toggling adapts content visibility to improve user experience on different devices.

Describe how to use Tailwind CSS classes to show an element only on large screens and hide it on smaller ones.

Think about hiding by default and showing at a breakpoint.

Explain why responsive visibility toggling is important for building websites that work well on phones and desktops.

Consider how users see content differently on small vs large screens.