Closed darkterminal closed 1 year ago
If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our GitHub Organisation - we help and encourage each other to contribute to open source little and often :neckbeard:. Any questions let us know.
Very nice explanation! 😎
The Back Story about your CSS Metaphor
The issue we are trying to solve is when using TailwindCSS with Next.js, the sticky footer doesn't work as expected.
The CSS Story!
How to fix the Next.js TailwindCSS sticky footer that is not fixed? A sticky footer is a web design feature where the footer stays at the bottom of the page, even if the content on the page is shorter than the screen height. The issue we are trying to solve is when using TailwindCSS with Next.js, the sticky footer doesn't work as expected.
To solve this issue, we need to create a custom document in the
_document.js
file located in thesrc/pages
folder. This file allows us to modify the default HTML document rendered by Next.js.Adding the
flex flex-col min-h-screen
classes. This will make thebody
element a flex container with a vertical layout and set its minimum height to the height of the viewport. This is necessary to make the sticky footer work properly.After creating the custom document, we need to create a
Layout
component inside thesrc/components
folder. TheLayout
component will be responsible for rendering our app's main content, including the navbar, the main content section, and the footer.The
Layout
component will take inchildren
as props and render them inside themain
tag. We can also include theNavbar
andFooter
components inside theLayout
component.Finally, we need to create the
Footer
component that will render the footer content. We can use theself-end
class to position the footer at the bottom of the page. We can also add any additional styling or content to theFooter
component.By following these steps, we can fix the Next.js TailwindCSS sticky footer issue and create a custom layout for our Next.js app.
A CSS demo/repos link
No response
PayPal Link for Donation (CSS Storyteller)
https://paypal.me/lazarusalhambra