Problem: Details/summary accordion.

Solution#

html
<details class="group border-b py-4">
  <summary class="flex cursor-pointer items-center justify-between font-medium">Question<span class="transition group-open:rotate-45">+</span></summary>
  <p class="mt-3 text-sm text-slate-600">Answer…</p>
</details>

Why this works#

Native details + group-open rotation = zero-JS accordion.

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