Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I use Tailwind CSS to create a sticky footer layout?
Asked on Jan 07, 2026
Answer
To create a sticky footer layout using Tailwind CSS, you can utilize flexbox utilities to ensure the footer stays at the bottom of the page when content is short, but follows the content when it's long.
<!-- BEGIN COPY / PASTE -->
<div class="min-h-screen flex flex-col">
<header class="bg-blue-500 p-4 text-white">
Header
</header>
<main class="flex-grow p-4">
Main content
</main>
<footer class="bg-gray-800 p-4 text-white">
Footer
</footer>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The
min-h-screenclass ensures the container takes at least the full height of the screen. - The
flexandflex-colclasses create a vertical flexbox layout. - The
flex-growclass on the main content area allows it to expand and fill the available space. - This layout keeps the footer at the bottom unless the content pushes it further down.
Recommended Links:
