How to hide elements for multiple different media screens in TailwindCSS

user_12646068 0
Viewed 265

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>
tailwind-css
1 Answers

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>
user_126460680
Related