DEV Community

Michael Andreuzza
Michael Andreuzza

Posted on

Tailwind CSS tip:Push footer to bottom.

Unsolicited tip for Tailwind CSS user #5

Push that footer to the bottom.

Sometimes our pages are pretty short and look like this which is sort out weird:

Image description

We can push to the bottom and make it look nicer and make it look like this instead.

Image description

This also works if you don't have any content like on this image.

Image description

To achieve this we can do this, by adding this "flex flex-col min-h-screen" to the body tag.

Then you can wrap all the content "" and give that wrapper the "flex-grow" class.

Remember to leave the footer outside of this wrapper.

Image description

Hope you find this helpful.

Thank you for reading and have a nice day!

Any questions feel free to reach on https://x.com/Mike_Andreuzza

Top comments (0)