<Image
  src={"/insta.png"}
  alt="Instagram"
  width={24} height={24}
  className="
    cursor-pointer
    2xl:h-8 2xl:w-8  md:h-6 md:w-6  sm:h-4 sm:w-4
  "
/>

Instead of repeatedly mentioning 2xl:h-8 and 2xl:w-8, you can combine both classes into one using group or a custom utility class in Tailwind CSS.

I want to know if there is any other shortened way to give responsiveness rather than this. This is taking too much time and config.js is not implementing here as well. Kindly developers, help me here and suggest some pros and cons as well.

<Image
  src={"/insta.png"}
  alt="Instagram"
  width={24} height={24}
  className="
    cursor-pointer
    2xl:h-8 2xl:w-8  md:h-6 md:w-6  sm:h-4 sm:w-4
  "
/>

Instead of repeatedly mentioning 2xl:h-8 and 2xl:w-8, you can combine both classes into one using group or a custom utility class in Tailwind CSS.

I want to know if there is any other shortened way to give responsiveness rather than this. This is taking too much time and config.js is not implementing here as well. Kindly developers, help me here and suggest some pros and cons as well.

• reactjs
• next.js
• tailwind-css
• tailwind-css-4

• so you want this class: 2xl:h-8 2xl:w-8 md:h-6 md:w-6 sm:h-4 sm:w-4 to be applied over another element? – jexroid Commented Mar 20 at 20:19
• yes like i have to set it again and again for every element – Moosa Haroon Commented Mar 23 at 2:03

2 Answers 2

If the width and height have the same value, use the size class, which declares both at once.

2xl:h-8 2xl:w-8 md:h-6 md:w-6 sm:h-4 sm:w-4

Merging w-8 h-8 can be shortened to size-8, etc.:

2xl:size-8 md:size-6 sm:size-4

• Sizing: width - TailwindCSS v4 Docs

the most simplest way to avoid repeating 2xl:h-8 2xl:w-8 md:h-6 md:w-6 sm:h-4 sm:w-4 is applying CSS layer There are two layers to apply styles, depending on your needs.

1. Components layer

in this approach, you are essentially making a new class and applying the styles to that element. i think this is a better choice for your use case

in your css file, you can use:

@layer components {
  .my-custom-container {
    @apply 2xl:h-8 2xl:w-8 md:h-6 md:w-6 sm:h-4 sm:w-4;
  }
}

2. Base layer

@layer base {
 div {
   @apply 2xl:h-8 2xl:w-8 md:h-6 md:w-6 sm:h-4 sm:w-4;
 }
}

Using the @apply directive, you can apply tailwind styles, not raw CSS. You are rewriting an HTML element and making it the default behavior, according to tailwinds documents