Tailwind CSS : Stylisez des éléments avec des classes utilitaires

Introduction

Dans ce laboratoire, vous serez initié à Tailwind CSS, un framework CSS "utility-first" très populaire. Contrairement au CSS traditionnel où vous écrivez des classes personnalisées, Tailwind fournit des classes utilitaires de bas niveau que vous pouvez composer directement dans votre HTML pour construire n'importe quel design. Vous apprendrez comment configurer Tailwind via un CDN et appliquer des classes utilitaires de base pour styliser un élément de page web simple pour l'arrière-plan, le texte, le padding et la mise en page. À la fin, vous aurez une compréhension pratique de la puissance et de la rapidité du CSS "utility-first".

Le fichier index.html nécessaire a été créé pour vous dans le répertoire ~/project. Vous vous concentrerez sur la modification de ce fichier pour appliquer les styles Tailwind.

Ajouter le lien CDN de Tailwind CSS à la section du HTML

Dans cette étape, vous allez ajouter Tailwind CSS à votre projet. Pour des configurations rapides et à des fins d'apprentissage, le moyen le plus simple est d'utiliser le CDN de Tailwind CSS. Cela implique d'ajouter une seule balise <script> dans la section <head> de votre fichier HTML.

Pourquoi pas de fichier CSS ? Contrairement aux frameworks CSS traditionnels, Tailwind CSS est "utility-first". Au lieu d'écrire des règles CSS dans des fichiers externes, vous appliquerez des classes utilitaires pré-construites directement dans votre HTML. Cette approche élimine complètement le besoin de fichiers CSS personnalisés.

Documentation Officielle : Pour une référence complète de Tailwind CSS, visitez : https://tailwindcss.com/docs

Tout d'abord, ouvrez le fichier index.html situé dans le répertoire ~/project en utilisant l'explorateur de fichiers sur le côté gauche du WebIDE.

Maintenant, ajoutez la balise <script> suivante à l'intérieur de la section <head> de votre fichier index.html.

<script src="https://cdn.tailwindcss.com"></script>

Après avoir ajouté la ligne, votre fichier index.html devrait ressembler à ceci :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <!-- Tailwind CSS CDN will be added here -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div>Hello, Tailwind!</div>
  </body>
</html>

Enregistrez le fichier en appuyant sur Ctrl+S. Bien que vous ne voyiez pas encore de changements visuels, les classes utilitaires de Tailwind sont maintenant disponibles pour être utilisées dans votre projet. Vous pouvez ouvrir l'onglet Web 8080 pour voir la page non stylisée.

Appliquer la classe bg-blue-500 pour la couleur de fond

Dans cette étape, vous allez appliquer votre première classe utilitaire Tailwind pour changer la couleur de fond de l'élément <div>. Tailwind utilise une convention de nommage bg-{couleur}-{nuance} pour les couleurs d'arrière-plan.

Référence : https://tailwindcss.com/docs/background-color

Nous utiliserons la classe bg-blue-500, qui applique un fond bleu moyen.

Ouvrez à nouveau le fichier index.html s'il n'est pas déjà ouvert. Localisez l'élément <div> et ajoutez-lui class="bg-blue-500".

<div class="bg-blue-500">Hello, Tailwind!</div>

Votre fichier index.html complet devrait maintenant ressembler à ceci :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="bg-blue-500">Hello, Tailwind!</div>
  </body>
</html>

Enregistrez le fichier (Ctrl+S) et basculez vers l'onglet Web 8080. Vous devriez maintenant voir le texte "Hello, Tailwind!" à l'intérieur d'une boîte avec un fond bleu.

Contrairement aux laboratoires précédents où vous écrivez des règles CSS dans des fichiers externes, Tailwind fournit des classes utilitaires pré-construites que vous appliquez directement dans le HTML. Aucune écriture de CSS personnalisé n'est nécessaire - composez simplement des utilitaires comme bg-blue-500, text-white, et p-4 pour construire des designs.

Avantages clés :

Développement plus rapide : Stylisez directement dans le HTML sans changer de fichier
Prototypage rapide : Construisez des mises en page instantanément avec des classes utilitaires
Design cohérent : Échelles d'espacement, de couleurs et de tailles standardisées
Réactivité intégrée : Utilitaires réactifs "mobile-first" inclus
Adapté à l'IA : Tailwind est conçu pour être utilisé avec des outils d'IA comme ChatGPT, ce qui facilite la génération de code.

Utiliser la classe text-white pour la couleur du texte

Dans cette étape, vous allez changer la couleur du texte pour la rendre plus lisible sur le fond bleu. Les utilitaires de couleur de texte de Tailwind suivent un modèle text-{couleur}. Pour rendre le texte blanc, vous utiliserez la classe text-white.

Référence : https://tailwindcss.com/docs/text-color

Vous pouvez ajouter plusieurs classes à un élément en les séparant par un espace à l'intérieur de l'attribut class.

Modifiez le <div> dans votre fichier index.html pour inclure la classe text-white.

<div class="bg-blue-500 text-white">Hello, Tailwind!</div>

L'ordre des classes à l'intérieur de l'attribut class n'a pas d'importance.

Après la modification, le corps de votre fichier index.html devrait ressembler à ceci :

<body>
  <div class="bg-blue-500 text-white">Hello, Tailwind!</div>
</body>

Enregistrez le fichier (Ctrl+S) et vérifiez l'onglet Web 8080. Le texte "Hello, Tailwind!" devrait maintenant être blanc, offrant un meilleur contraste avec le fond bleu.

Implémenter la classe p-4 pour le padding

Dans cette étape, vous allez ajouter un espacement interne, ou padding, à l'élément <div>. Cela empêchera le texte de toucher les bords de la boîte bleue. Tailwind fournit des utilitaires de padding au format p-{taille}.

Référence : https://tailwindcss.com/docs/padding

Nous utiliserons la classe p-4, qui applique une quantité moyenne de padding (1rem ou 16px par défaut) sur les quatre côtés de l'élément.

Ajoutez la classe p-4 à l'attribut class de votre élément <div> dans index.html.

<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>

Le corps de votre fichier index.html devrait maintenant être :

<body>
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

Enregistrez le fichier (Ctrl+S) et actualisez l'onglet Web 8080. Vous remarquerez qu'il y a maintenant de l'espace entre le texte et le bord de la boîte bleue, ce qui rend le design plus net.

Ajouter les classes flex justify-center pour la mise en page

Dans cette dernière étape, vous allez centrer l'élément <div> stylisé sur la page. Vous pouvez y parvenir en utilisant les utilitaires Flexbox de Tailwind.

Pour ce faire, vous appliquerez des classes à la balise <body> pour en faire un conteneur flex et centrer son contenu.

flex : Cette classe applique display: flex à l'élément.
justify-center : Cette classe centre les éléments flex le long de l'axe principal (horizontalement par défaut).
h-screen : Cette classe définit la hauteur de l'élément à 100 % de la hauteur de la fenêtre d'affichage, ce qui est nécessaire pour que le centrage vertical fonctionne (bien que nous ne fassions ici que le centrage horizontal, c'est une bonne pratique pour les mises en page de page complète).

Modifiez la balise <body> dans votre fichier index.html pour ajouter ces classes.

<body class="flex justify-center h-screen">
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

Votre fichier index.html complet ressemblera maintenant à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex justify-center h-screen">
    <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
  </body>
</html>

Enregistrez le fichier (Ctrl+S) et visualisez le résultat dans l'onglet Web 8080. Votre boîte stylisée devrait maintenant être centrée horizontalement sur la page.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez franchi avec succès vos premiers pas dans le monde de Tailwind CSS. Dans ce laboratoire, vous avez appris à intégrer Tailwind dans un fichier HTML en utilisant son CDN. Vous avez ensuite pratiqué le concept fondamental d'un framework utility-first en appliquant plusieurs classes directement à vos éléments HTML. Vous êtes maintenant familiarisé avec l'utilisation des utilitaires pour la couleur de fond (bg-blue-500), la couleur du texte (text-white), le padding (p-4) et la mise en page Flexbox (flex, justify-center, h-screen). Ces connaissances fondamentales vous aideront à créer des designs plus complexes et réactifs avec rapidité et cohérence.

Utilitaires CSS Modernes avec Tailwind