How can I create a sticky header with Tailwind utilities?
Asked on Oct 05, 2025
Answer
Creating a sticky header with Tailwind CSS involves using the `sticky` utility to make an element stick to the top of its container when scrolling. Here's how you can achieve that using Tailwind's utility classes.
<!-- BEGIN COPY / PASTE -->
<header class="sticky top-0 bg-white shadow-md">
<nav class="max-w-7xl mx-auto p-4">
<ul class="flex space-x-4">
<li><a href="#" class="text-blue-500 hover:text-blue-700">Home</a></li>
<li><a href="#" class="text-blue-500 hover:text-blue-700">About</a></li>
<li><a href="#" class="text-blue-500 hover:text-blue-700">Contact</a></li>
</ul>
</nav>
</header>
<!-- END COPY / PASTE -->Additional Comment:
- The `sticky` class makes the element sticky, while `top-0` ensures it sticks to the top of the viewport.
- Adding `bg-white` and `shadow-md` gives the header a background color and shadow for better visibility.
- Ensure the parent container has a defined height for the sticky effect to work correctly.
- Test the sticky behavior across different browsers to ensure compatibility.
Recommended Links: