Utiliser le créateur de héro avancé (HTML)
Si les options de personnalisation ne suffisent pas à refléter la bannière que vous avez en tête, vous pouvez directement ajouter des éléments HTML offrant davantage de flexibilité.
Pour ce faire, ouvrez la section héros dans le menu déroulant à gauche, puis sélectionnez le héros à modifier.
Il faut ensuite aller dans la section Contenu du texte, où vous trouverez l’option pour activer le mode avancé.
Une fois ce mode activé, vous verrez une boîte de code vous permettant d’ajouter les éléments HTML de votre choix. Vous pouvez cliquer sur le bouton Éléments autorisés afin de voir toutes les balises HTML autorisées, les attributs et les classes Tailwind CSS. Toutes les classes prennent en charge les variantes réactives (sm:, md:, lg:, xl:, 2xl:).
Vous pourrez voir en temps réel les changements effectués sur le héros.
Voici un petit exemple d’utilisation permettant d’afficher le texte d’un même élément en plusieurs couleurs.
Le code utilisé est :
<divclass="flex justify-center items-center h-screen "> <h1class="text-5xl font-bold"> <spanclass="text-blue-500">Laurence</span> <spanclass="text-red-500">Smith</span> </h1> </div>
