Tailwind est un framework CSS qui offre un ensemble de valeurs prédéfinies pour diverses propriétés, telles que les couleurs, l'espacement, les tailles de police, etc. Cependant, les utilisateurs peuvent parfois souhaiter utiliser une valeur qui n'est pas incluse dans la configuration par défaut, comme une valeur personnalisée. couleur ou une marge spécifique. Dans cette situation, ils peuvent utiliser des valeurs arbitraires.

Cet article explique la méthode pour utiliser des valeurs arbitraires dans Tailwind CSS.

Comment utiliser des valeurs arbitraires dans Tailwind ?

Les valeurs arbitraires sont les valeurs personnalisées qui peuvent être écrites directement dans l'attribut de classe HTML sans les définir dans le fichier de configuration Tailwind. Ils sont précédés d'une notation entre crochets, telle que [24px], [2.5rem], etc. Pour utiliser les valeurs arbitraires dans Tailwind, utilisez une notation entre crochets et spécifiez une valeur personnalisée pour générer dynamiquement des classes d'utilitaires.

Consultez les étapes ci-dessous pour une meilleure compréhension :

Étape 1 : Utiliser des valeurs arbitraires dans le programme HTML

Créez un programme HTML et utilisez la notation entre crochets avec n'importe quelle valeur personnalisée pour créer les classes souhaitées. Par exemple, nous avons utilisé le 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', et autres cours :

Ici:

• 'bg-[#e9e516]' classe définit la couleur d'arrière-plan de la
  à '#e9e516' (jaune).
• 'w-[600px]' définit la largeur de
  à 600 pixels.
• 'h-[400px]' applique la hauteur de 400 pixels à l'élément
  .
• 'p-[13px]' définit le rembourrage du
  à 13 pixels.
• 'm-[19px]' définit la marge du
  à 19 pixels.

• 'texte-[30px]' La classe définit la taille de la police de l'élément

  à 30 pixels.

• 'texte-[#7405ab]' la classe définit la couleur du texte de l'élément

  sur violet (#7405ab).

• 'suivi-[0.5rem]' classe applique l'espacement des lettres à 0,5 rem à l'élément

  .

Étape 2 : vérifier la sortie

Pour vous assurer que les valeurs arbitraires fonctionnent correctement, affichez la page Web HTML :

La sortie ci-dessus indique que les valeurs arbitraires fonctionnent correctement telles qu'elles ont été définies.

Conclusion

Pour utiliser les valeurs arbitraires dans Tailwind, utilisez une notation entre crochets avec n'importe quelle valeur personnalisée dans le programme HTML pour générer des classes de manière dynamique. Les utilisateurs peuvent utiliser des valeurs pour toute propriété qui accepte une valeur numérique ou de couleur, telle que la taille de la police, la couleur, la largeur, la hauteur, la marge, le remplissage, etc. Cet article a expliqué la méthode pour utiliser des valeurs arbitraires dans Tailwind CSS.