String together responsive classes in TailwindCSS

Question

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.

Judah

Shared an answer around a similar question like this here: https://mcmap.net/q/533052/-is-there-a-way-to-chain-multiple-tailwind-css-classes-on-a-single-hover-instance – Partly

Answer 1

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.

Twopence

Answer 2

This is actually something that is addressed in Windi.css, you can use group variants like this:

text-blue md:text-green lg:(p-2 m-2 text-red-400)

At the moment, it doesn't look as though tailwind has added this in, but I would be very surprised if they don't get round to doing so soon. Being able to ground breakpoints really helps keeping you class lists tidy... especially when tailwind can lead to some long, long lists.

Check out Windi if you have the chance, it's a good project, but I do think Tailwind will be introducing most of their (good) features before long.

Aaberg

Update: there is a discussion on the github repo that might be worth keeping an eye on if you are interested in this. – Aaberg

Answer 3

For this to work, the tailwind CSS file would have to define a md:grid-cols-2:col-gap-12:py-1 class. It would also have to generate classes all other possible permutations for each breakpoint (up to some arbitrary maximum number of combined utilities). There are already 2877 classes for md, so once you start combining them this will get large very quickly. Just considering up to 3 utilities as you have here would result in about 24 million permutations for md and the same for each other breakpoint, so I don't think this would be practical.

Zabrine

Answer 4

One other thing helped me to achieve this is to use the screen directive.

https://tailwindcss.com/docs/functions-and-directives#screen

@media screen(md) {
    /* css to be overriden for >md screens */ 
}

or alternatively,

@screen md {
    /* css to be overriden for >md screens */
}

This way the responsive design doesn't clutter the standalone css. Can't find a way with inlined styles though.

Sign

Answer 5

As this question is similar to the group variant question for tailwind CSS, please check out my detailed answer about it here https://mcmap.net/q/533052/-is-there-a-way-to-chain-multiple-tailwind-css-classes-on-a-single-hover-instance

Xenophobia

Answer 6

This guy figured out how to group classes under a utility class prefix without any third party plugin or library. It is super simple.

Original answer and 100% of the credit here.

Tailwind.config.js

export default {
  // ...
  plugins: [
    require('tailwindcss/plugin')(({ matchUtilities }) => {
      matchUtilities({
        'group': (value) => ({
          [`@apply ${value.replaceAll(',', ' ')}`]: {}
        })
      })
    })
  ]
}

Then you do <div class="md:group-[grid-cols-2,col-gap-12,py-16]">

{/* then */}
<section className='text-[#f00] text-[25px] font-semibold md:text-[#0f0] md:text-[36px] md:font-bold'>
  {...}
</section>

{/* now */}
<section className='text-[#f00] text-[25px] font-semibold md:group-[text-[#0f0],text-[36px],font-bold]'>
  {...}
</section>

Again, 100% of the credit goes to this answer. I am just adding it here for more visibility.

Plunge

Answer 7

TailwindCSS doesn’t support a built-in syntax for stacking or grouping responsive classes in the way you described, but you can achieve a similar effect by using custom utilities or by employing Tailwind's @apply directive if you're using a build tool that supports it.

Mission