Module 2 : Fondamentaux et Utilitaires de Base

Objectif : Maîtriser la syntaxe utilitaire de Tailwind CSS pour construire des interfaces par conception atomique.
Ce module explique comment contrôler chaque aspect visuel directement dans le HTML à l’aide de classes.

---

1. Le Modèle de Boîte (Box Model) : Marges, Padding, Bordures et Ring

Le modèle de boîte est fondamental en CSS. Tailwind utilise une nomenclature concise basée sur une échelle numérique cohérente (de 0 à 96), extensible via @theme.

A. Marges (m-) et Padding (p-)
Les utilitaires utilisent des préfixes directionnels :

• t (top), b (bottom), l (left), r (right)
• x (axe horizontal), y (axe vertical)

Exemples :

<!-- Padding de 1rem (16px) sur tous les côtés -->
<div class="p-4">Contenu</div>

<!-- Marge haute de 2rem (32px) et centrage horizontal -->
<div class="mx-auto mt-8">Contenu centré</div>

<!-- Padding droit de 0.625rem (10px) -->
<div class="pr-2.5">Contenu avec espace</div>

B. Bordures (border) et Rayons (rounded)
Contrôlez l’épaisseur, la couleur et l’arrondi des bordures.

Exemples :

<!-- Bordure fine grise avec coins arrondis -->
<button class="rounded-lg border border-gray-400">Valider</button>

<!-- Bordure basse bleue épaisse (4px) -->
<div class="border-b-4 border-blue-500">Section</div>

C. L’utilitaire ring (standard en v4)
Générez des contours internes via box-shadow pour les états interactifs (focus), sans perturber le layout.

Exemple :

<!-- Lueur bleue de 2px au focus -->
<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="Saisir" />

---

2. Typographie Moderne : Familles de polices, graisses et directives CSS

Tailwind v4 rationalise la gestion des polices et de la mise en forme texte.

A. Utilitaires de base

<!-- Texte extra-large (20px) et semi-gras -->
<h2 class="text-xl font-semibold">Titre</h2>

<!-- Centrage et transformation en majuscules -->
<p class="text-center uppercase">Texte centré en MAJUSCULES</p>

B. Intégration des Google Fonts via CSS (Nouveauté v4)
Plus besoin de balises <link> : importez directement les polices dans votre CSS, géré par le moteur Oxide.

Dans src/app.css :

@import 'tailwindcss';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

@theme {
    --font-sans: 'Inter', sans-serif; /* Définition dans le thème */
}

Utilisation dans le HTML :

<p class="font-sans">Ce texte utilise Inter.</p>

---

3. Couleurs et Opacité : Palette étendue et color-mix

La v4 offre une palette étendue et intègre les fonctions CSS modernes comme color-mix().

A. Palette étendue

<!-- Texte rouge moyen, fond bleu foncé -->
<div class="bg-blue-900 text-red-500">Contraste</div>

<!-- Utilisation d’une couleur personnalisée définie dans @theme -->
<div class="bg-brand">Marque</div>

B. Gestion de l’opacité
Utilisez le format / pour ajuster l’opacité.

Exemple :

<!-- Fond noir à 50% d’opacité -->
<div class="bg-black/50">Overlay semi-transparent</div>

C. color-mix() natif (Avancé)
Le moteur Oxide génère des utilitaires basés sur color-mix() pour des dégradés ou mélanges de couleurs complexes définis dans @theme.

---

4. Unités et “Arbitrary Values”

Tailwind permet d’utiliser des valeurs arbitraires ou des fonctions CSS avancées pour des designs précis et fluides.

A. Valeurs arbitraires
Injectez n’importe quelle valeur CSS avec [].

Exemples :

<!-- Marge gauche exacte de 13px -->
<div class="ml-[13px]">Elément précis</div>

<!-- Largeur calculée -->
<div class="w-[calc(100%-3rem)]">Elément adaptatif</div>

B. Fonctions de calcul fluide (clamp, min, max)
La v4 encourage l’usage de fonctions CSS modernes pour une typographie et des dimensions responsives.

Exemple (configuration typographique fluide) :

<!-- Génère un texte scalable entre 2rem et 3rem selon la largeur d’écran -->
<h1 class="text-fluid-lg">Titre responsive</h1>

Note : L’utilitaire text-fluid-lg dépendra de la configuration par défaut de la v4 en 2025, mais illustre la philosophie du design fluide.

---

Résumé

Ce module couvre les briques de base de Tailwind CSS :

• Contrôle précis de l’espacement et des contours.
• Gération typographique moderne avec intégration simplifiée des polices.
• Utilisation avancée des couleurs et de l’opacité.
• Flexibilité offerte par les valeurs arbitraires et les fonctions CSS.

Prochaine étape : Appliquer ces concepts pour structurer des layouts complexes dans le Module 3.