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>