Building Responsive Layouts Without Writing More CSS

One of the things that Tailwind unlocked for me is this ability to build responsive layouts without writing more CSS. What I’m talking about is not simply writing the CSS in HTML, unlike what most Tailwind fans suggest. <!-- Not just a matter of transferring CSS into classes --><div class="flex flex-col">...</div> What I’m talking about is using Tailwind’s ability to adjust HTML on the fly, coupled with a component I’ve built to create any layout easily. The Best Example The best example here is a simple CSS grid with any number of columns. To build this in CSS, we can use grid-template-columns with repeat and a variable to indicate the number of columns we want to create. .grid-simple { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));} This makes a lot of sense. The code is simple and beautiful. And the component that gets built as a result is very flexible. But the problem here is that, with the current CSS conventions, the only way to use this beautiful…