'How can I compose tailwind classes into more higher-level, semantic classes?

With Tailwind, I can do something like this:

<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">

But that type of markup has lots of problems for me. I'd much rather do something like this, a "fake" way using sass mixins of composing disparate UI styles into a larger level emantic class:

.user-avatar {
  @include inline-block;
  @include h-6;
  @include w-6;
  @include rounded-full;
  @include ring-2;
  @include ring-white;
}

<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">

Is anything like this possible in Tailwind?

tailwind-css

Solution 1:^[1]

Ah, just saw the @apply directive. That must be the thing.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	pixelearth

'How can I compose tailwind classes into more higher-level, semantic classes?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]