Gridlines for Tailwind CSS

Gridlines is a reimagining of Tailwind’s spacing system to be more flexible and customizable. With it comes a shift in how designers should think about spacing. The core idea is to reason in ratios and fractions instead of absolute measurements such as pixels. The only absolute unit in Gridlines is the base grid cell size that underlies your design.

This is equivalent to the “1cm” of 1cm graph paper. If you scale 1cm to 2cm, the rest of your UI sans text elements will scale as well, including borders and border radii. This turns out to be incredibly useful for adapting your designs to different device contexts, such as mobile phones, which are typically held closer to the face, or so-called ‘10-foot’ UIs which are much further away.

I developed this idea over a few years of running in to common problems with spacing and it fit well into Tailwind’s design system. I am really proud of this spacing system and advocate for more designers to approach their UI design this way. It makes translating sketches from actual graph paper to real usable designs quite straightforward.