🏠

Tailwind CSS Concept Explained

Making Websites Work on All Screen Sizes (Responsiveness)

Hide something on small screens but show it on big screens (or vice versa).

Skill ID: Responsiveness_41

Description: Control element visibility based on screen size.

Where to apply: Hiding complex navigation on mobile, showing mobile-only elements.

Key Tailwind Classes:

hidden sm:block (hidden by default, block on small screens and up) , block sm:hidden (block by default, hidden on small screens and up)

Gotcha: Misunderstanding that responsive prefixes (like sm: , md: ) apply to that screen size and larger, unless overridden by another prefix for a larger screen. To hide something only on small screens (and show it on medium and up), you'd use hidden md:block (if it's block by default). To show something only on small screens, use block md:hidden .

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

Example 8:

Example 9:

🏠