Classes tailwind css dynamiques
Nouveau petit problème à résoudre, un cas concret de menu généré dynamiquement pour lequel il est nécessaire d’ajouter un padding afin de décaler les sous menus par rapport à leur parent, mais en conservant un bord gauche toujours identique (affichage d’un border au survol).
Pour le menu j’ai donc créé un composant, jusque là pas de souci :
@php
$padding_left = 2;
$parts = explode(' ', $class);
$counts = array_count_values($parts);
if (isset($counts['sub'])) {
$padding_left += 2 * (int)$counts['sub'];
}
@endphp
<div class="menu_label pl-{{ $padding_left }} py-2 "><i class="{{ $entry->icon }} pr-2"></i><a href="{{ $entry->url }}">{{ __($entry->label) }}</a></div>
Je passe sur les détails de construction du menu, mais disons que pour lui affecter un padding progressif, je passe par la vérification du nombre de sub dans sa classe, ensuite je multiplie le résultat par 2, ce qui me donne une variable $padding_left
utilisable ensuite.
Ensuite la concaténation pl-{{ $padding_left }}
permet d’obtenir pl-2, pl-4, pl-6, … Or tailwindcss compile les classes dans un fichier css mis à disposition du front en fonction de celles qu’il a trouvé dans le code, celles qui nous intéressent étant générées dynamiquement, elles ne sont donc pas présentes dans le fichier compilé (si elle n’ont pas été déclarées à un autre endroit bien entendu).
La documentation tailwindcss donne quelques exemples pour gérer le cas, mais pas à partir de variables, ou tout au moins je n’ai pas réussi à faire fonctionner le padding comme voulu, j’ai donc utilisé une autre méthode qui fonctionne aussi, pour cela j’ai créé un composant dummy que j’appelle depuis mon template principal, dans ce fichier j’ai placé les classes que je peux éventuellement générer afin qu’elles soient présentes dans la fichier css compilé en prenant soit de ne pas :
{{-- <div class="pl-2 pl-4 pl-6"></div> --}}
Tout fonctionne comme souhaité, ce n’est sans doute pas la manière la plus académique, mais le résultat est là, le code permet donc à tailwindcss de trouver les classes dans le fichier mais le code étant en commentaire blade {{-- --}}
le contenu n’apparaitra pas dans la page.