Changing CSS Variables with Tailwind

Today I discovered that you can change CSS Variables with Tailwind on the fly.

Here’s the syntax:

<div class="[--span:2] md:[--span:3]">...</div>

This is very powerful — because it gives me the ability to change the number of columns in a custom grid easily with CSS Variables like --span.

And as you may suspect, I’m integrating this methodology with the layouts I’m creating in CSS Layout Patterns.

One of my latest inventions is a Masonry Grid that can span multiple columns — with super little CSS and JavaScript.

Honestly, I’m seeing CSS Layout Patterns as the easiest way to create layouts now. Can’t wait to share more about it in the future.