Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I implement a sticky footer layout using Tailwind CSS utilities?
Asked on Apr 02, 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 viewport when the content is short, but moves down as content grows. This is achieved by setting the container to flex and using `flex-col` to stack elements vertically.
<!-- BEGIN COPY / PASTE -->
<div class="min-h-screen flex flex-col">
<header class="bg-blue-500 p-4">
<h1 class="text-white">Header</h1>
</header>
<main class="flex-grow p-4">
<p>Main content goes here.</p>
</main>
<footer class="bg-gray-800 p-4">
<p class="text-white">Footer</p>
</footer>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The `min-h-screen` class ensures the container takes at least the full height of the screen.
- `flex` and `flex-col` stack the header, main, and footer vertically.
- `flex-grow` on the main content allows it to expand and fill available space, pushing the footer down.
- This layout works responsively without additional media queries.
Recommended Links:
