How to make element invisible in mobile size but visible in laptop size in TailwindCSS

user_13765994 0
Viewed 6268

In tailwind css, we can say lg:hidden to hide element from the lg size screen.

In the below example, we do not specify the screen size so 01 is entirely hidden from any screen.

<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

I want to achieve only show element from lg size but hide mobile size. However, tailwind css breakpoints are based on min width so if we specify sm:hidden, for example, min width from 768px are all hidden.

Is there any way I can just show element from specific screen size but hide below that screen size in Tailwind CSS?

tailwind-css typescript reactjs css
4 Answers

Is this what you want?

<div class="flex ...">
  <div class="hidden lg:block...">01</div>
  <div>02</div>
  <div>03</div>
</div>
user_119875940

Use lg:visible to apply the visible utility at only large screen sizes and above.

<div class="flex ...">
  <div class="invisible lg:visible">01</div>
  <div>02</div>
  <div>03</div>
</div>

Refer here also

user_109623640

use hidden class as default property and then use md:flex as it will hide the div for breakpoints below md and show it on all the breakpoints above md

<div class="flex ...">
<div class="hidden md:flex">01</div>
<div>02</div>
<div>03</div>
</div>
user_180838870

For my use case, I was trying to conditionally add a break statement to a set of words.

I used the following code:

className="hidden lg:inline

user_146767360
Related