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 @apply that can help make your code more readable and manageable:

Use @apply in Custom CSS

With Tailwind's @apply 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.

Example:

/* styles.css */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

You can then use this new .btn-primary class in your HTML instead of repeating the Tailwind utilities:

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

If it helped you, you can support:
https://buymeacoffee.com/kaleemelahi

Follow for more:
Linkedin
GIthub