Changing CSS Variables with Tailwind

Published:

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.

Learn To Up Your Development Game

You'll get articles to help you improve your game as a web developer. These articles can be related to CSS, JavaScript, Astro, Svelte, or even general web development tips.