Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I create a sticky footer layout using Tailwind CSS?
Asked on Mar 23, 2026
Answer
To create a sticky footer layout using Tailwind CSS, you can utilize the utility classes for flexbox to ensure the footer stays at the bottom of the viewport when the content is short, but follows the content when it's long.
<!-- 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 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 viewport.
- The "flex" and "flex-col" classes create a vertical flexbox layout.
- "flex-grow" on the main content allows it to expand and fill available space, pushing the footer to the bottom when content is short.
- Ensure the footer is the last element within the flex container for it to stick to the bottom.
Recommended Links:
