Jank-free Tailwind / Alpine.js accordion - tailwind-css

Question

I'm working on an accordion that uses Tailwind and Alpine.js (2.x) but I can't seem to get the transitions smooth, it's too janky.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"></script>
<ol class="max-w-sm p-4">
<li class="pb-6 mb-6 border-b" x-data="{isOpen : true }">
<h3 class="flex text-2xl mb-6" :class="{ 'mb-6': isOpen }">
<button class="text-left" type="button" #click="isOpen = !isOpen">
Heading 1
</button>
</h3>
<div x-show.transition.duration.300ms.origin.bottom="isOpen" #click.away="isOpen = false">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.</p>
</div>
</li>
<li class="pb-6 mb-6 border-b" x-data="{isOpen : false }">
<h3 class="flex text-2xl mb-6" :class="{ 'mb-6': isOpen }">
<button class="text-left" type="button" #click="isOpen = !isOpen">
Heading 2
</button>
</h3>
<div x-show.transition.duration.300ms.origin.bottom="isOpen" #click.away="isOpen = false">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.</p>
</div>
</li>
</ol>
Any tips on how to make it smoother?

Answer 1

Edit on 2022-01-06
Accordions (among other components) are now part of official AlpineJS documentation. Use them for perfect out of the box accordions.
Original answer
The main issue regarding smoothness is related to mb-6 not transitioning. A quick fix is proposed below (using mt-6 for the child).
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"></script>
<ol class="max-w-sm p-4">
<li class="pb-6 mb-6 border-b" x-data="{isOpen : true }">
<h3 class="flex text-2xl">
<button class="text-left" type="button" #click="isOpen = !isOpen">
Heading 1
</button>
</h3>
<div class="mt-6" x-show.transition.duration.300ms.origin.bottom="isOpen" #click.away="isOpen = false">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.</p>
</div>
</li>
<li class="pb-6 mb-6 border-b" x-data="{isOpen : false }">
<h3 class="flex text-2xl">
<button class="text-left" type="button" #click="isOpen = !isOpen">
Heading 2
</button>
</h3>
<div class="mt-6" x-show.transition.duration.300ms.origin.bottom="isOpen" #click.away="isOpen = false">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.</p>
</div>
</li>
</ol>
However, the smoothness is still not great. To achieve something nice & cool, instead of using transition properties and x-show from AlpineJS, use Transition class and play with the max-height from Tailwind instead. You have a nice example here referenced in AlpineToolbox.