Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I create a sticky header with Tailwind CSS?
Asked on Jan 27, 2026
Answer
To create a sticky header using Tailwind CSS, you can use the `sticky` utility class along with positioning classes to ensure the header stays at the top of the viewport as you scroll.
<!-- BEGIN COPY / PASTE -->
<header class="sticky top-0 bg-white shadow-md">
<nav class="flex justify-between items-center p-4">
<div class="text-lg font-bold">Logo</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-700 hover:text-blue-500">Home</a></li>
<li><a href="#" class="text-gray-700 hover:text-blue-500">About</a></li>
<li><a href="#" class="text-gray-700 hover:text-blue-500">Contact</a></li>
</ul>
</nav>
</header>
<!-- END COPY / PASTE -->Additional Comment:
- The `sticky` class makes the element behave like a sticky element, adhering to the top of the viewport when scrolling.
- The `top-0` class ensures the header sticks to the top of the page.
- Use `bg-white` and `shadow-md` for a clean, elevated look.
- Ensure the parent container has enough height for scrolling to see the sticky effect.
Recommended Links:
