How to make footer stay in the bottom (tailwind css)

Situation: When there is little content in the page, you want the footer stay on the bottom of page.

<div class='parent'>
  <header></header>
  <main></main>
  <footer></footer>
</div>

Solution: add flex class to parent, then let the main grow to fill the spare space.

.parent{
  @apply flex flex-col h-screen
}
main{
  @apply flex-grow
}