Is it possible to groups class under one parent class for consistency?

Richard77 0
Viewed 24

I'm working with Tailwind css, which is really good because of those utility classes. Even Bootstrap has many utility classes. a single element can have so many utility classes.

<div class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl max-h-96">
</div>

Is it possible to group those classes in one super class and only apply the one?

.wrapper {
 class1;
 class3;
 class3;
 ...
 classn;

}

And apply that on the HTML element

<div class="wrapper">
</div>

I'm not sure if this is even possible. However, is there anything close to this?

Thank for helping

sass css
1 Answers

You should be able to accomplish this using tailwind's components and @apply. More on that here.

In your tailwind setup file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .wrapper {
    @apply sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl max-h-96;
  }
}

You would then be able to use it like this:

<div class="wrapper">...</div>
Andy Hoffman0
Related