Utilisation de Tailwind CSS pour la Mise en Forme
Tailwind CSS est un framework CSS qui propose une collection de classes utilitaires de bas niveau. Ces classes peuvent être ajoutées directement dans votre balisage afin de concevoir des interfaces sans avoir à écrire du code CSS depuis le début. L'idée principale de Tailwind est que, simplement en ajoutant l'ensemble approprié de classes, il est possible d'appliquer les styles requis à vos éléments.
Par exemple :
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
L'élément button aura un fond vert avec un texte blanc. Il bénéficiera également d'un espacement interne et de coins arrondis.
Retour au projet
Ajoutez un nouvel élément à l’application avec le style Tailwind. Copiez l’élément div ci-dessous et collez-le au-dessus de l’élément p dans le fichier app/page.tsx.
Après avoir effectué les modifications, enregistrez-les et vérifiez la page en direct. Une forme circulaire blanche devrait maintenant apparaître.
En pratique
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
What does the `h-10 w-10 rounded-full bg-white` class combination do?
Can you explain how to use Tailwind classes for other shapes or colors?
Where should I place the new `div` in the `app/page.tsx` file?
Awesome!
Completion rate improved to 2.08Utilisation de Tailwind CSS pour la Mise en Forme
Glissez pour afficher le menu
Tailwind CSS est un framework CSS qui propose une collection de classes utilitaires de bas niveau. Ces classes peuvent être ajoutées directement dans votre balisage afin de concevoir des interfaces sans avoir à écrire du code CSS depuis le début. L'idée principale de Tailwind est que, simplement en ajoutant l'ensemble approprié de classes, il est possible d'appliquer les styles requis à vos éléments.
Par exemple :
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
L'élément button aura un fond vert avec un texte blanc. Il bénéficiera également d'un espacement interne et de coins arrondis.
Retour au projet
Ajoutez un nouvel élément à l’application avec le style Tailwind. Copiez l’élément div ci-dessous et collez-le au-dessus de l’élément p dans le fichier app/page.tsx.
Après avoir effectué les modifications, enregistrez-les et vérifiez la page en direct. Une forme circulaire blanche devrait maintenant apparaître.
En pratique
Merci pour vos commentaires !
