CODEWITHSUNDEEP
tailwind-css
Lim Han Yang
Lim Han Yang

Reputation: 440

How to hide elements for multiple different media screens in TailwindCSS

In tailwind we can write xl:hidden to hide element from xl screen size. But what happens if I want to have more than two different screen sizes. For example I want to be have page fit laptop, tablet and phone screens. How should I make sure there is min-width and max-width for screen sizes between the largest and smallest screen size. So I don't show content meant for tablet screens when the user is using a phone.

<div class="xl:hidden">a</div>
<div class="lg:hidden">b</div>
<div class="sm:hidden">c</div>

Upvotes: 6

Views: 4015

Answers (1)

Lim Han Yang
Lim Han Yang

Reputation: 440

I figured it out, used hidden and block together to make the element hide at smaller screen sizes. The hidden attribute hides the element unless the screen width is reached causing it to become display:block. Thus, only showing at the element at the given screen size.

<div class="hidden xl:block">a</div>
<div class="hidden xl:hidden sm:block">b</div>
<div class="sm:hidden">c</div>

Upvotes: 5

Related Questions