Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I implement a sticky footer using Tailwind CSS?
Asked on Mar 21, 2026
Answer
To implement a sticky footer using Tailwind CSS, you can use flexbox utilities to ensure that the footer remains at the bottom of the page. This involves setting up a flex container that takes up the full height of the viewport and using flex-grow to push the footer to the bottom.
<!-- BEGIN COPY / PASTE -->
<div class="flex flex-col min-h-screen">
<header class="bg-blue-500 p-4">
<h1 class="text-white">Header</h1>
</header>
<main class="flex-grow bg-gray-100 p-4">
<p>Main content goes here.</p>
</main>
<footer class="bg-blue-500 p-4">
<p class="text-white">Sticky Footer</p>
</footer>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- Use "flex" and "flex-col" on the container to create a vertical layout.
- "min-h-screen" ensures the container takes at least the full height of the viewport.
- "flex-grow" on the main content area allows it to expand and push the footer to the bottom.
- Ensure that the footer is the last element within the flex container.
Recommended Links:
