Tailwind tip: Managing a long list of utility classes in a single line of code

Managing a long list of utility classes in a single line can become unwieldy.

Here is Tailwind's built-in feature directive, you can create reusable CSS classes by grouping multiple Tailwind utilities. This helps reduce the number of classes in your HTML and keeps your components more organized.

/* styles.css */

.btn-primary {

  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;

}

<button class="btn-primary">Primary Button</button>