[Tailwind] Abstract Utility Classes to BEM Components in Tailwind

Posted 2020-10-30 Answer1215

When creating UIs with utility classes, a lot of repetition can occur within the html markup. In this lesson, we see how this concern can be addressed by extracting a group of tailwind utility classes into a component classname. We create a Blocks Elements and Modifier (BEM) button component with a few style modifiers, that can be used everywhere in our project.

 

It is not reuseable when you only apply utilities class to the element.

 

The button way is:

<button class="button">Button</button>

 

So to create .button class and apply all the utilities class from tailwind, we can do:

.button {
  @apply .font-bold .py-2 .px-4 .rounded;
}
.button-blue {
  @apply .bg-blue .text-white;
}
.button-blue:hover {
  @apply .bg-blue-dark;
}

 Then we can use it like:

<button class="button button-blue">Button</button>