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>



<p>If it helped you, you can support:<br>
https://buymeacoffee.com/kaleemelahi</p>


<hr>

<p><strong>Follow for more:</strong><br>
Linkedin<br>
GIthub</p>


          

            
        

The above is the detailed content of Tailwind tip: Managing a long list of utility classes in a single line of code. For more information, please follow other related articles on the PHP Chinese website!