Astuce Tailwind : Gérer une longue liste de classes utilitaires dans une seule ligne de code

Gérer une longue liste de classes utilitaires sur une seule ligne peut devenir fastidieux.

Voici la fonctionnalité intégrée de Tailwind @apply qui peut vous aider à rendre votre code plus lisible et gérable :

Utilisez @apply dans le CSS personnalisé

Avec la directive @apply de Tailwind, vous pouvez créer des classes CSS réutilisables en regroupant plusieurs utilitaires Tailwind. Cela permet de réduire le nombre de classes dans votre code HTML et de mieux organiser vos composants.

Exemple :

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

Vous pouvez ensuite utiliser cette nouvelle classe .btn-primary dans votre HTML au lieu de répéter les utilitaires Tailwind :

<bouton>



<p>Si cela vous a aidé, vous pouvez soutenir :<br>
https://buymeacoffee.com/kaleemelahi</p>


<hr>

<p><strong>Suivez pour en savoir plus :</strong><br>
Linkedin<br>
GIthub</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!