Make an element invisible in mobile size in Tailwind CSS

<div class="flex">
    <div class="bg-slate-200 flex-1 hidden md:flex">Col - 1</div>
    <div class="bg-teal-200 flex-1">Col - 2</div>
    <div class="bg-sky-200 flex-1">Col - 3</div>
</div>

On mobile devices, screen real estate is limited, so it's critical to prioritize the most valuable content. Hiding less essential elements can help improve the user experience by making the content more scannable and easier to read.

TailwindCSS optimized media queries for the mobile-first design. By default, Tailwind uses a mobile-first breakpoint system and provides many utility classes for developers. For example, you can hide an element on small screens by adding the hidden utility class.

Take the following example. There is a div container with 3 columns on the desktop screen. For mobile, we want the first column to be invisible.

<div class="flex">
    <div class="bg-slate-200 flex-1">Col - 1</div>
    <div class="bg-teal-200 flex-1">Col - 2</div>
    <div class="bg-sky-200 flex-1">Col - 3</div>
</div>

Since Tailwind media queries operate with min-width values, the default is what is displayed on the mobile screen. In this example, we want the first column not to appear in the mobile view, so we use the hidden utility class:

<div class="flex">
    <div class="bg-slate-200 flex-1 hidden">Col - 1</div>
    <div class="bg-teal-200 flex-1">Col - 2</div>
    <div class="bg-sky-200 flex-1">Col - 3</div>
</div>

However, this is not enough, as the first column will not appear on the laptop screen. Therefore, you also need to specify that the element should appear above a certain size. For example, for a display wider than 1024px (lg prefix), the column should be displayed, i.e. the display property should be flex using the prefixed utility class: lg:flex

<div class="flex">
    <div class="bg-slate-200 flex-1 hidden lg:flex">Col - 1</div>
    <div class="bg-teal-200 flex-1">Col - 2</div>
    <div class="bg-sky-200 flex-1">Col - 3</div>
</div>