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
Top comments (0)