Responsive Design

Code

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded">Card 1</div>
  <div class="bg-white p-4 rounded">Card 2</div>
  <div class="bg-white p-4 rounded">Card 3</div>
</div>

<!-- Stacking to side-by-side -->
<div class="flex flex-col md:flex-row gap-6">
  <aside class="md:w-1/4">Sidebar</aside>
  <main class="md:w-3/4">Content</main>
</div>

<!-- Responsive text and spacing -->
<h1 class="text-2xl sm:text-3xl lg:text-5xl font-bold">
  Scales with viewport
</h1>

Explanation

Tailwind is mobile-first: unprefixed classes apply at all sizes, and sm:, md:, lg:, xl: prefixes override at larger breakpoints. A class like md:grid-cols-2 only takes effect at medium screens and up. This lets one element declaratively adapt its layout across breakpoints.

More Tailwind CSS Snippets