Application des classes utilitaires en HTML
Pour utiliser les classes utilitaires dans Tailwind CSS, ajoutez-les à l'attribut class de vos éléments HTML. Chaque classe correspond à une règle CSS spécifique, ce qui facilite la compréhension et la gestion de vos styles directement dans votre HTML.
Structure HTML
Commencez avec une structure HTML de base.
index.html
Application des classes utilitaires
Ajout de classes utilitaires à l'attribut class de vos éléments pour les styliser.
index.html
Explication
p-4: Ajoute une marge intérieure ;bg-gray-100: Définit la couleur d’arrière-plan sur gris clair ;rounded-lg: Ajoute de grands coins arrondis ;shadow-md: Ajoute une ombre de taille moyenne.
h-16: Définit la hauteur ;w-16: Définit la largeur ;rounded-full: Rend l’image circulaire ;mx-auto: Centre l’image horizontalement.
text-center: Centre le texte ;mt-4: Ajoute une marge supérieure ;text-lg: Définit la taille de la police ;font-semibold: Rend le texte semi-gras ;text-gray-500: Définit la couleur du texte en gris.
mt-4: Ajoute une marge supérieure ;px-4: Ajoute un remplissage horizontal ;py-2: Ajoute un remplissage vertical ;bg-blue-500: Définit la couleur d’arrière-plan en bleu ;text-white: Définit la couleur du texte en blanc ;rounded: Ajoute de petits coins arrondis ;hover:bg-blue-700: Change la couleur d’arrière-plan au survol.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 3.57
Application des classes utilitaires en HTML
Glissez pour afficher le menu
Pour utiliser les classes utilitaires dans Tailwind CSS, ajoutez-les à l'attribut class de vos éléments HTML. Chaque classe correspond à une règle CSS spécifique, ce qui facilite la compréhension et la gestion de vos styles directement dans votre HTML.
Structure HTML
Commencez avec une structure HTML de base.
index.html
Application des classes utilitaires
Ajout de classes utilitaires à l'attribut class de vos éléments pour les styliser.
index.html
Explication
p-4: Ajoute une marge intérieure ;bg-gray-100: Définit la couleur d’arrière-plan sur gris clair ;rounded-lg: Ajoute de grands coins arrondis ;shadow-md: Ajoute une ombre de taille moyenne.
h-16: Définit la hauteur ;w-16: Définit la largeur ;rounded-full: Rend l’image circulaire ;mx-auto: Centre l’image horizontalement.
text-center: Centre le texte ;mt-4: Ajoute une marge supérieure ;text-lg: Définit la taille de la police ;font-semibold: Rend le texte semi-gras ;text-gray-500: Définit la couleur du texte en gris.
mt-4: Ajoute une marge supérieure ;px-4: Ajoute un remplissage horizontal ;py-2: Ajoute un remplissage vertical ;bg-blue-500: Définit la couleur d’arrière-plan en bleu ;text-white: Définit la couleur du texte en blanc ;rounded: Ajoute de petits coins arrondis ;hover:bg-blue-700: Change la couleur d’arrière-plan au survol.
Merci pour vos commentaires !