How do I use Tailwind to create a sticky header?

Ask any question about Tailwind CSS here... and get an instant response.

Post this Question & Answer:

How do I use Tailwind to create a sticky header?

Asked on Oct 29, 2025

Answer

In Tailwind CSS, you can create a sticky header by using the "sticky" utility class to make an element stick to the top of the viewport as you scroll. This is typically combined with "top-0" to set the top position.

<!-- 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">
            <img class="h-8 w-auto" src="logo.png" alt="Logo">
          </div>
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline space-x-4">
              <a href="#" class="text-gray-900 hover:text-blue-500">Home</a>
              <a href="#" class="text-gray-900 hover:text-blue-500">About</a>
              <a href="#" class="text-gray-900 hover:text-blue-500">Contact</a>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <!-- END COPY / PASTE -->

Additional Comment:

The "sticky" class makes the header sticky, while "top-0" ensures it sticks to the top.
Adding "bg-white" and "shadow-md" helps the header stand out and remain visible.
Ensure the parent container has enough height to allow scrolling, otherwise the sticky effect won't be noticeable.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How do I use Tailwind to create a sticky header?

Asked on Oct 29, 2025

Answer

Real Questions. Clear Answers.