Problem: Multi-column footer.

Solution#

html
<footer class="border-t py-16">
  <div class="container mx-auto grid gap-12 px-6 sm:grid-cols-2 lg:grid-cols-5">
    <div class="lg:col-span-2">Brand blurb</div>
    <div>links…</div><div>links…</div><div>links…</div>
  </div>
</footer>

Why this works#

5-column grid with a 2-span brand cell.

Variants#

  • Responsive: add screen prefixes to the core classes
  • Dark: pair each color utility with its dark: twin
  • Animated: add transition + a state variant for motion

cookbook/index|Cookbook index · utilities/index|Utilities reference · patterns/index|Layout patterns