Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Application des classes utilitaires en HTML | Core Concepts and Basic Styling
Tailwind CSS pour le Développement Web

bookApplication 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

index.html

copy

Application des classes utilitaires

Ajout de classes utilitaires à l'attribut class de vos éléments pour les styliser.

index.html

index.html

copy

Explication

  1. p-4 : Ajoute une marge intérieure ;
  2. bg-gray-100 : Définit la couleur d’arrière-plan sur gris clair ;
  3. rounded-lg : Ajoute de grands coins arrondis ;
  4. shadow-md : Ajoute une ombre de taille moyenne.
  1. h-16 : Définit la hauteur ;
  2. w-16 : Définit la largeur ;
  3. rounded-full : Rend l’image circulaire ;
  4. mx-auto : Centre l’image horizontalement.
  1. text-center : Centre le texte ;
  2. mt-4 : Ajoute une marge supérieure ;
  3. text-lg : Définit la taille de la police ;
  4. font-semibold : Rend le texte semi-gras ;
  5. text-gray-500 : Définit la couleur du texte en gris.
  1. mt-4 : Ajoute une marge supérieure ;
  2. px-4 : Ajoute un remplissage horizontal ;
  3. py-2 : Ajoute un remplissage vertical ;
  4. bg-blue-500 : Définit la couleur d’arrière-plan en bleu ;
  5. text-white : Définit la couleur du texte en blanc ;
  6. rounded : Ajoute de petits coins arrondis ;
  7. hover:bg-blue-700 : Change la couleur d’arrière-plan au survol.
question mark

Comment appliquer des classes utilitaires à un élément HTML dans Tailwind CSS ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 2

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

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

bookApplication 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

index.html

copy

Application des classes utilitaires

Ajout de classes utilitaires à l'attribut class de vos éléments pour les styliser.

index.html

index.html

copy

Explication

  1. p-4 : Ajoute une marge intérieure ;
  2. bg-gray-100 : Définit la couleur d’arrière-plan sur gris clair ;
  3. rounded-lg : Ajoute de grands coins arrondis ;
  4. shadow-md : Ajoute une ombre de taille moyenne.
  1. h-16 : Définit la hauteur ;
  2. w-16 : Définit la largeur ;
  3. rounded-full : Rend l’image circulaire ;
  4. mx-auto : Centre l’image horizontalement.
  1. text-center : Centre le texte ;
  2. mt-4 : Ajoute une marge supérieure ;
  3. text-lg : Définit la taille de la police ;
  4. font-semibold : Rend le texte semi-gras ;
  5. text-gray-500 : Définit la couleur du texte en gris.
  1. mt-4 : Ajoute une marge supérieure ;
  2. px-4 : Ajoute un remplissage horizontal ;
  3. py-2 : Ajoute un remplissage vertical ;
  4. bg-blue-500 : Définit la couleur d’arrière-plan en bleu ;
  5. text-white : Définit la couleur du texte en blanc ;
  6. rounded : Ajoute de petits coins arrondis ;
  7. hover:bg-blue-700 : Change la couleur d’arrière-plan au survol.
question mark

Comment appliquer des classes utilitaires à un élément HTML dans Tailwind CSS ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 2
some-alt