Tailwind CSS Tip
Keeping the footer at the bottom of your page.
When building a website, you might find that if the page content isn't long enough, there's unwanted space beneath the footer. To ensure the footer stays at the bottom, follow this tip.
This structure uses Tailwind CSS's flexbox utilities to create a full-height (minimum screen height) flexible column layout, where the <main> content grows to fill available space, pushing the <Footer/> to the bottom of the viewport when content is not enough to fill the page.
Tailwind CSS Classes
class="flex flex-col min-h-screen
⏤ These classes are applied to the <body> tag to create a flexible box layout.
flex: This applies a flexible box layout model, allowing you to design a complex layout structure using a more efficient and predictable way than the traditional block model.
flex-col
⏤ This modifies the flex direction to column, meaning that the children of this element (the navigation, main content, and footer) will be laid out in a vertical column.
min-h-screen
⏤ This ensures that the minimum height of the <body> element is at least 100% of the viewport height. If the content is shorter than the viewport height, this rule ensures that the <body> element stretches to fill the entire viewport, preventing the footer from floating up.
class="flex-grow"
⏤ Applied to the <main> element, this class allows the main content area to grow and fill any available space. If there's more space available in the viewport than the content takes up, flex-grow will make the main content area expand to use up that space, effectively pushing the footer to the bottom of the viewport.
Hope you find this helpful!
Top comments (3)
You can also use these free tailwind footers for your next projects.
This was exactly what I needed. I had my layout working with raw css and when I made the switch to Tailwind, I was feeling a bit lost, but it's easier than it seemed at first!
Thank you for sharing!
glad I could help!!
Some comments have been hidden by the post's author - find out more