Search code examples
htmlcssresponsivetailwind-css

String together responsive classes in TailwindCSS

I've been trying to Google this, but I'm either not using the right terms or nobody has asked my question yet.

Question: Is there a way to stack responsive classes in TailwindCSS? What I'd like to do is change something like:

class="grid gap-12 md:grid-cols-2 md:col-gap-12 md:py-16 lg:grid-cols-3 lg:py-12"

Into something more like:

class="grid gap-12 md:grid-cols-2:col-gap-12:py-16 lg:grid-cols-3:py-12"

I realize that it does not cut down that much in line length, but to me it just seems a little more sane grouping the responsive classes together. I'm new to TailwindCSS and just wanted to ask if this was possible.

Solution

  • Plain short answer is no, this is not possible in Tailwind.css.

    The only way this is possible is by creating the classes yourself or suggesting it on their github.