Revision history [back]

Here are the steps to create a genuine sticky header/footer with Tailwindcss that remains fixed at the bottom even when scrolling:

1. Add the fixed class to the header/footer element.
2. Add the bottom-0 class to the header/footer element to ensure it sticks to the bottom of the page.
3. Add the z-50 class to ensure the header/footer stays on top of other elements on the page.
4. Add the w-full class to the header/footer element to ensure it spans the entire width of the viewport.
5. Add the desired background color and other styling using Tailwind's utility classes.

Example code for a sticky footer:

<footer class="fixed bottom-0 z-50 w-full bg-gray-900 p-4">
    <p class="text-white text-center">This is a sticky footer</p>
</footer>

Example code for a sticky header:

<header class="fixed top-0 z-50 w-full bg-gray-900 p-4">
    <p class="text-white text-center">This is a sticky header</p>
</header>

You can adjust the styles and positioning as per your design needs.