Reducing the list of classes

[ColonelBlimp]

Hi, I am new to Tailwindcss.

I have the following:

<div class="grid row-gap-1 grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 md:gap-2 lg:gap-2 lx:gap-2">
   <div class="col-span-1 md:col-span-2 lg:col-span-2 xl:col-span-2">
     Column 1
   </div>
   <div class="col-span-1">
     Column 2
   </div>
<div>

which produces two columns for the given screen sizes, and one column for everything else.

Question:

Is there any way to reduced md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 md:gap-2 lg:gap-2 lx:gap-2 and `md:col-span-2 lg:col-span-2 xl:col-span-2' to a single class?

Many thanks.

[robbyrice]

You can remove lg:grid-cols-3 xl:grid-cols-3 and lg:gap-2 xl:gap-2 because the larger sizes will inherit from the smaller ones. The same goes for lg:col-span-2 xl:col-span-2 on the inner div.

[ColonelBlimp]

Many thanks!

[robbyrice]

Glad to help!