Display

<!-- 1) Standard display values -->
<div class="block">…</div>
<span class="inline">…</span>
<span class="inline-block px-2 py-1">…</span>
<div class="flex gap-3">…</div>
<div class="inline-flex items-center gap-2">…</div>
<div class="grid grid-cols-3 gap-4">…</div>
<div class="inline-grid">…</div>
<div class="contents">…</div>          <!-- removes the box, keeps children -->
<div class="hidden">…</div>

<!-- 2) Responsive layouts — mobile-first -->
<!-- Stack on mobile, side-by-side on md+ -->
<div class="flex flex-col md:flex-row gap-4">
    <aside class="md:w-64">Sidebar</aside>
    <main class="flex-1">Content</main>
</div>

<!-- Hide an element on small screens -->
<button class="hidden md:inline-flex">Open settings</button>
<button class="md:hidden">Menu</button>

<!-- 3) Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <div class="…">Card</div>
    …
</div>

<!-- 4) Print-friendly -->
<header class="flex print:hidden">Don't print the nav</header>
<article class="hidden print:block">Show only when printing</article>

<!-- 5) Toggle visibility but keep layout -->
<div class="invisible">Layout-occupying but invisible</div>
<div class="visible">…</div>

<!-- 6) contents — useful with semantic markup -->
<ul class="flex gap-3">
    <li class="contents">          <!-- <li> doesn't constrain layout -->
        <a>One</a>
        <a>Two</a>
    </li>
</ul>

<!-- 7) Common pattern — top nav -->
<nav class="flex items-center justify-between p-4">
    <a class="text-xl font-semibold">Logo</a>
    <ul class="hidden md:flex gap-6">
        <li><a>Products</a></li>
        <li><a>Pricing</a></li>
        <li><a>About</a></li>
    </ul>
    <button class="md:hidden">☰</button>
</nav>

<div class="block md:inline-block lg:flex">…</div>