Helpful Page Layouts using Tailwind CSS
Tags: webdev, tailwindcss, css, design
Published: 2021-06-17 16:43:51

If you're here you're probably familiar with the CSS **utility** goodness that is [Tailwind CSS](https://tailwindcss.com). 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](https://tailwindcss.com/docs/flex-direction).

---

2-Column Layout with Sidebar
--

![Sidebar layout with Tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tivupa6fklt0wpi19eq9.png)

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`


```html
<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](https://codeply.com/p/bACkfI6wD2)

---

Holy Grail Layout
--

![Holy Grail layout with Tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38aoj28qjzigu55xe73p.png)

Perhaps the most famous layout for dotcom era Web designers, here's a Tailwind implementation of the 3-column "[Holy Grail](https://en.wikipedia.org/wiki/Holy_grail_(web_design))". 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!


```html
<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...

```css
@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](https://codeply.com/p/aSizSG3Vd8)

---

Full-screen Background Image
--

![Full-screen background layout with Tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9r8ehbeettewoi7z0fz.png)

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.

```html
<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](https://codeply.com/p/Ouin4azXzs)

---

Full-screen App Layout with Sidebar
--

![Single page app layout with Tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5909rqjst7jieucupda.png)

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.


```html
<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](https://codeply.com/p/8JtDeQ2hLi)

---

*Important!* If you're going to use Tailwind, remember [it's best to make it part of the JS build process](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin) 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](https://www.codeply.com/p?starter=Tailwind)