Tricks in tailwindCss - 7/18/2024

transition from height 0 to auto

 <div class="m-4 grid grid-rows-[0] rounded-md bg-blue-200 bg-opacity-40 p-4 transition-all duration-500 ease-in-out hover:grid-rows-1">
      <div class="overflow-hidden">Expandable content</div>
  </div>

flex basis

Utilities for controlling the initial size of flex items.It can be width or height according to your orientation.