Creating a footer that sticks to the bottom of the page is fairly easy when using Tailwind (and to be fair, it's not too hard with plain old CSS either).
You can use something like the code outlined below.
<body class="flex flex-col min-h-screen">
<header>
Header content...
</header>
<main class="flex-grow pb-12">
Main content...
</main>
<footer>
Footer content...
</footer>
</body>
That will set the body to always be at least the height of the viewport and the main
element to fill the available space height wise (using Flexbox).
The bottom padding on the main
element is optional, but it's probably something you want to have in order to create some space in the layout before the footer comes.
If you want the footer to actually stick to the bottom of the screen as well (i.e. always be visible regardless of how tall the main content area is), then add sticky
and bottom-0
to the footer
element.