What’s the best way to create a sticky header with Tailwind CSS?
Asked on Sep 09, 2025
Answer
To create a sticky header with Tailwind CSS, you can use the "sticky" utility class along with "top-0" to ensure the header remains at the top of the viewport as you scroll. This approach leverages Tailwind's utility-first philosophy for quick and effective styling.
<!-- BEGIN COPY / PASTE -->
<header class="sticky top-0 bg-white shadow-md">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0">
<a href="#" class="text-xl font-bold">Logo</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
<a href="#" class="text-gray-700 hover:text-gray-900">About</a>
<a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
</div>
</div>
</div>
</nav>
</header>
<!-- END COPY / PASTE -->Additional Comment:
- The "sticky" class makes the element stick to the top of the viewport.
- "top-0" ensures the header starts at the top, without any offset.
- Use "bg-white" and "shadow-md" for a clean look and subtle depth.
- Responsive utilities like "hidden md:block" help manage visibility on different screen sizes.
Recommended Links: