Helpful Page Layouts using Tailwind CSS

#webdev #tailwindcss #css #design

If you're here you're probably familiar with the CSS utility goodness that is Tailwind CSS. Using the default Tailwind base classes you can quickly knockout some very nice page layouts.

I've done oodles of layouts using Bootstrap, and I wanted to learn more about Tailwind so I thought some hands-on practice would be helpful. These example responsive layouts all make use of Tailwind's Flexbox classes.

2-Column Layout with Sidebar

Here's a super-basic 2-column page layout with Tailwind. It has a sidebar on the left, and a scrollable main content area on the right. There is also a footer that sticks to the bottom regardless of content height. Since I wanted to place a nav menu in the Sidebar, I made the Sidebar sticky so that it's always visible on the left as the page is scrolled vertically. The entire layout has a contained with and centered using container mx-auto



<div class="container mx-auto">
    <div class="flex flex-row flex-wrap py-4">
        <aside class="w-full sm:w-1/3 md:w-1/4 px-2">
            <div class="sticky top-0 p-4 w-full">
                <!-- navigation -->
                <ul class="flex flex-col overflow-hidden">
                    ...
                </ul>
            </div>
        </aside>
        <main role="main" class="w-full sm:w-2/3 md:w-3/4 pt-1 px-2">
            <!-- content area -->
        </main>
    </div>
</div>
<footer class="mt-auto">
    ...
</footer>

Demo

Holy Grail Layout

Perhaps the most famous layout for dotcom era Web designers, here's a Tailwind implementation of the 3-column "Holy Grail". This layout is responsive so that the layout stacks vertically on smaller mobile screens. This fixed|fluid|fixed layout works well for pages that have a lot of content!



<div class="w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 flex-grow">
    <!-- fixed-width -->
    <div class="w-fixed w-full flex-shrink flex-grow-0 px-4">
        <div class="sticky top-0 p-4 w-full h-full">
            <!-- nav goes here -->
        </div>
    </div>
    <main role="main" class="w-full flex-grow pt-1 px-3">
        <!-- fluid-width: main content goes here -->
    </main>
    <div class="w-fixed w-full flex-shrink flex-grow-0 px-2">
        <!-- fixed-width -->
        <div class="flex sm:flex-col px-2">
            <!-- sidebar goes here -->
        </div>
    </div>
</div>
<footer class="bg-black mt-auto">
    ...
</footer>

This layout also requires a little extra CSS to make the side columns fixed width...



@media (min-width: 640px) {
    .w-fixed {
        flex: 0 1 230px;
        min-width: 230px;
    }
}

The fixed widths are only applied above Tailwind's small breakpoint of 640px so that the layout stacks vertically on mobile devices.

Demo

Full-screen Background Image

This is the very popular full-screen background image layout that works perfectly for landing pages. You can easily change the center overlay content to a sign-up for or call-to-action card.

This layout is responsive so that the centered content area is full-width on mobile, 50% width on small devices and 33% width on large devices.



<div class="w-full p-4">
    <main role="main" class="w-full flex flex-col h-screen content-center justify-center">
        <div class="w-full sm:w-1/2 lg:w-1/3 bg-gray-50 rounded-xl m-auto">
            <div class="bg-white rounded shadow px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <!-- centered card -->
            </div>
        </div>
    </main>
</div>

Demo

Full-screen App Layout with Sidebar

This single-page "app" style layout features a sidebar, main content area, and footer. This full-height layout is never more than viewport height. The content area scrolls independently as needed. For this example, we're using the Tailwind CSS utility framework. As part of it's default classes, Tailwind includes Flexbox classes which make this layout implementation simple!

Additionally, this layout is responsive. As screen width decreases down to 640px (the smallest Tailwind breakpoint), the layout stacks vertically. The sidebar orientation is flipped from vertical to horizontal (flex-col sm:flex-row), and the main content area fills the remaining height above the footer.



<div class="w-full flex flex-col sm:flex-row flex-grow overflow-hidden">
    <div class="sm:w-1/3 md:1/4 w-full flex-shrink flex-grow-0 p-4">
        <div class="sticky top-0 p-4 w-full">
            <ul class="flex sm:flex-col overflow-hidden content-center justify-between">
                 <!-- nav goes here -->
            </ul>
        </div>
    </div>
    <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
         <!-- content area -->
    </main>
</div>
<footer class="mt-auto">
    ...
</footer>

Demo

Important! If you're going to use Tailwind, remember it's best to make it part of the JS build process so that you can choose the parts you need. The Tailwind CSS referenced in these examples is off CDN and a whopping 2.7MB 😲!

Thanks for reading, and I hope you can make use of these examples to kickstart your next Tailwind project! Play with Tailwind on Codeply