Classes utilitaires, composants et balises

Un utilitaire réalise une tâche de style ciblée. Un composant combine une structure HTML et plusieurs règles. Ajouter font-bold à un paragraphe ne le transforme pas en titre : le rôle reste déterminé par sa balise.

La compilation des classes Tailwind

Le navigateur ne connaît pas spontanément ces classes. Le projet doit charger une feuille qui contient leurs règles. La compilation Tailwind repère les classes utilisées et génère le CSS. Le compilateur fourni dans les aperçus du cours sert aux essais ; le projet remis doit suivre les commandes de compilation du support.

Les démonstrations locales utilisent Tailwind 3.4.17. Les instructions de projet doivent annoncer leur version : Tailwind 4 utilise un autre mode d’installation et d’import CSS. Mélanger un tutoriel v3 et une commande v4 peut donner un projet qui semble correct mais ne génère aucune règle attendue.

Les variantes d’état et de largeur

hover:bg-blue-700 concerne l’état de survol ; focus-visible:outline concerne un repère de focus ; md:grid-cols-2 applique deux colonnes au seuil md et au-delà, selon la configuration de la version. Le préfixe ne choisit pas une marque de téléphone. Les classes sans préfixe donnent la base.

Construisez une petite carte avec des classes complètes et explicites. Dans un projet compilé, fabriquer une classe comme 'bg-' + couleur + '-500' peut empêcher sa détection. Préférez un choix parmi des noms complets présents dans les fichiers analysés.

La syntaxe des classes utilitaires

Tailwind est un framework CSS utilitaire : une classe fournit une règle limitée, puis plusieurs classes construisent un composant. p-4 ajoute du padding ; m-4 ajoute une marge. Ce n’est pas un langage HTML différent. Les balises gardent leur sens, leurs attributs et leurs responsabilités d’accessibilité.

Le projet de cours utilise Tailwind 3.4, comme le site existant. L’aperçu charge le compilateur pédagogique Tailwind 3.4.17 depuis les fichiers du site : aucune connexion à un CDN n’est nécessaire et les nouvelles classes saisies sont prises en compte automatiquement. Ce compilateur dans le navigateur sert aux essais. Dans votre projet livré, utilisez la compilation CLI décrite ci-dessous et chargez la feuille CSS produite ; ne recopiez pas le chemin interne /vendor/ du site de cours.

<article class="rounded-lg border border-slate-300 bg-white p-4 shadow-md">
  <h2 class="text-xl font-bold text-slate-900">Atelier photo</h2>
  <p class="mt-2 text-slate-700">Une première rencontre autour de l’image.</p>
  <a class="mt-4 inline-block text-blue-700 underline" href="#contact">
    Découvrir l’atelier photo
  </a>
</article>

Lecture accompagnée : la balise article décrit la fiche ; la classe p-4 règle son espace intérieur. mt-2 crée un espace avant le paragraphe. text-xl règle la taille et text-slate-700 la couleur : le préfixe seul ne suffit pas pour deviner la propriété.

<style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 20px;
        font-family: system-ui, sans-serif;
        color: #18324c;
        background: #f1f5f9;
      }
      button,
      input,
      select,
      textarea {
        font: inherit;
        max-width: 100%;
      }
      button {
        padding: 8px 12px;
        cursor: pointer;
      }
      input,
      select,
      textarea {
        padding: 8px;
      }
      :focus-visible {
        outline: 3px solid #2563eb;
        outline-offset: 3px;
      }
      .panel {
        padding: 16px;
        background: white;
        border-radius: 12px;
        min-width: 0;
      }
      .cards {
        display: grid;
        gap: 16px;
      }
      label {
        display: block;
        margin-block: 12px 4px;
      }
      h1 {
        font-size: 1.4rem;
      }
      h2 {
        font-size: 1.15rem;
      }
      p,
      h2,
      a {
        overflow-wrap: anywhere;
      }
      .note {
        font-size: 0.9rem;
      }
    </style>
    <script src="/vendor/tailwind/tailwind-3.4.17.js"></script>

<h1>Une fiche, plusieurs utilitaires</h1>
    <section class="grid grid-cols-1 gap-4">
      <article
        class="rounded-lg border border-slate-300 bg-white p-4 shadow-md"
      >
        <h2 class="text-xl font-bold text-slate-900">Atelier photo</h2>
        <p class="mt-2 text-slate-700">
          Une première rencontre autour de l’image.
        </p>
        <a class="mt-4 inline-block text-blue-700 underline" href="#contact">
          Découvrir l’atelier
        </a>
      </article>
    </section>
    <p id="contact">Contact : association du campus.</p>
    <p class="note">
      Tailwind 3.4.17 généré dans cet aperçu pédagogique. Essayez p-8, m-4 ou
      grid-cols-3.
    </p>

    <script></script>

Installation et compilation de Tailwind 3.4

Dans un dossier neuf avec Node/npm disponibles : npm init -y, puis npm install -D tailwindcss@3.4 et npx tailwindcss init. Le fichier de configuration doit scanner vos fichiers, par exemple content: ['./*.html', './js/*.js']. Dans input.css, ajoutez les trois directives @tailwind base;, @tailwind components;, @tailwind utilities;, puis lancez npx tailwindcss -i input.css -o styles.css --watch. Le HTML charge styles.css avec un link rel="stylesheet". Ces commandes concernent la version 3.4 ; ne mélangez pas les procédures des versions 3 et 4.

Tableau de référence — notions et opérations