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.

Want to become a better Frontend Developer?

Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!

  • 60+ CSS articles
  • 90+ JavaScript articles

I’ll also send you one article every week to help you improve your FED skills crazy fast!