Converting Foundation's Grid to Tailwind

For years, Foundation was our front-end framework of choice. It offered a wide range of useful components, including tabs, buttons, accordions, and breadcrumbs.

But there's one feature that stood out above the rest, and that's the grid.

Not only was this grid automatically responsive, but it also handled flow and gutters. This might seem like no big deal in the age of CSS Grid and flexbox. But does anyone remember float grids and clearfixes? It was a lifesaver in those days.

Despite Foundation's usefulness, we eventually shifted to Tailwind CSS as our main front-end tool. Tailwind took some getting used to, with several internal experiments before we were ready to use it on a client site. But now, it lets us work faster than ever, creating front-end code that's easy to customize and reuse across multiple templates.

Not to mention the JIT compiler which generates styles on demand, giving us the smallest CSS files we've seen in years. In the case of our company site, we went from 131kb down to 47kb when we converted it from Foundation to Tailwind. That's a 64% reduction in file size! And our latest client sites have been even better, with some CSS files clocking in below 30kb.

Converting Our Company Site

Naturally, it was hard to let go of Foundation's grid when we switched to Tailwind. And if you're like us, you've probably gotten used to thinking in a specific framework over the years, using classes like .row, .column and .cell rather than the underlying CSS properties.

We also weren't eager to reinvent the wheel. Instead, we asked ourselves, "What's the fastest way to convert these Foundation classes into Tailwind classes?"

Let's start by looking at an HTML example from Foundation's XY Grid:

Like I mentioned above, this example uses Foundation's XY Grid. But if you're using a legacy version of Foundation, you can easily substitute .grid-x for .row, and .cell for .column. You can also swap these out with classes from other popular frameworks like Bootstrap's Grid System.

Regardless of your chosen framework, we can break down the pieces like so:

.grid-container adds a maximum width, and centers the content horizontally on the page.

.grid-x creates a flex container that holds the columns/cells and displays them horizontally.

.grid-padding-x applies horizontal padding to the child elements (the cells.)

.cell acts as the grid columns, receiving the padding style and size utility class.

.small-12determines the width of each column on small screens (and anything larger in the absence of .medium-[x] or .large-[x] classes.) Each number is a fraction of twelve, which makes this element 100% width on small screens.

.medium-3 and .medium-6 determine the width of each column on medium screens (and anything larger in the absence of .large-[x] classes.) Again, each number is a fraction of twelve, seting these to 25% and 50%, respectively.

With that in mind, we could write the CSS like this:

This is a simplification, of course. And it's far from an accurate representation of Foundation's CSS. Rather, this is an attempt to capture the spirit of what these popular grid frameworks do behind the scenes.

Once we had these basic CSS properties, the next step was finding the right utility classes in the Tailwind Docs.

Here's the Tailwind markup we came up with:

Don't worry, there's no need to take notes or reverse engineer this. We'll have a full class conversion cheat sheet at the bottom of this post!

But first, let's look at the differences.

The Grid Container

At first glance, mx-auto max-w-6xl looks far less intuitive than the grid containers we've seen in Foundation and Bootstrap. But look at that second class, .max-w-6xl. You can easily adjust the size of this container by swapping that out for another class from Tailwind's Max-Width Classes. This immediately makes Tailwind more flexible than the alternatives.

The Row

flex flex-wrap is straightforward enough. We're creating a flex container, and allowing the items inside to wrap. Depending on your needs, you could easily combine these classes into a single element with the "grid-container" classes above. You can also experiment with other flex utility classes from the Tailwind docs and center, reverse, or justify your columns as needed.

The Columns

Again, the sizing classes (w-full md:w-1/4) are straightforward enough if you've spent time in the Tailwind docs. The biggest difference here is the padding utility class, .px-4.

Foundation handles the padding behind the scenes, adding specific styles to each child element inside the grid. And while Tailwind's method uses more markup, it's also more customizable. Imagine you just received a client design with different gutter sizes throughout the page. In any other framework, that might mean overriding the default styles (either with your own custom CSS, or your own utility classes.) Here, it's as simple as changing a number!

The Cheat Sheet

Finally, as promised, here's our entire cheat sheet for converting a Foundation grid to Tailwind:

As a final note, we aren't claiming this is the best way to build a grid with Tailwind. That will depend on your specific needs. But if you're used to thinking in a traditional framework like Foundation, this should give you a good starting point as you ease into Tailwind!