Le titre est long l’article va être court. Je reproche souvent à tailwind bootstrap etc de faire des balises à rallonge.
Ce qui rend la lecture du code très pénible. Mais on peut rendre cela plus lisible et plus pratique grâce à cette astuce.
En quoi ça consiste ; imaginons une balise comme ceci. (ex d’un bouton ici https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply)
<div class="py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;">
Click me
</button>Comme vous pouvez le voir c’est relativement long ;mais avec cette astuce on peut faire comme ceci.
Dans un fichier html.
<button class="btn-indigo">
Click me
</button>Dans le fichier css; on ajoute la directive @apply.
.btn-indigo
{
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
}
}L’avantage, c’est qu’on peut appliquer cette classe un peu partout dans le html et modifier en une seule fois tout le style du composant en cas de besoin.
Cette astuce, je l’ai trouvé dans cette vidéo qui parle de tailwindcss.
Je ne sais pas si cette astuce fonctionne dans bootstrap ou materialize mais je pense qu’elle doit aussi fonctionner.