Problem: Large alternating rows.

Solution#

html
<section class="grid items-center gap-12 py-20 lg:grid-cols-2">
  <div class="order-2 lg:order-1">image</div>
  <div class="order-1 lg:order-2"><p class="text-sm font-semibold text-blue-600">Kicker</p><h2 class="mt-2 text-3xl font-bold">Benefit</h2><p class="mt-4 text-slate-600">Proof…</p></div>
</section>

Why this works#

Alternating order classes flip rows per section.

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