Introduction à
Tailwind CSS
M. Atezong Ymele Carick A.
Software Engineer | LLM Engineer | AI trainer
Objectifs du cours
● Ce qu’est Tailwind CSS
● Pourquoi l’utiliser au lieu du CSS classique
● Installer Tailwind CSS
● Comprendre les classes utilitaires
● Créer des layouts modernes et responsive
● Réaliser des TPs concrets (Portfolio, cards, header)
C’est quoi Tailwind CSS ?
Tailwind CSS est un framework CSS basé sur des classes utilitaires.
● On ne crée presque plus de fichiers CSS
● On écrit le style directement dans le HTML
Exemple :
Tailwind CSS vs CSS classique
CSS classique Tailwind CSS
Beaucoup de CSS Peu ou pas de CSS
Classes personnalisées Classes utilitaires
Fichiers longs HTML expressif
Style séparé Style directement visible
CSS classique Tailwind CSS
Objectif : vitesse + cohérence + productivité
Pourquoi utiliser Tailwind ?
1. Développement très rapide
2. Responsive intégré
3. Design cohérent
4. Pas de conflits CSS
5. Très utilisé en entreprise
6. Compatible React, Vue, Django, [Link]
Installation (Méthode simple CDN)
Ajouter dans le <head> :
Principe des classes utilitaires
Chaque classe fait une seule chose.
couleur Taille graisse
Couleurs & Textes
Taille couleur bleu Fond gras
couleur grise avec une teinte de 600
Espacements (margin / padding)
Padding: 1.5rem;
margin: 1rem;
Bordures & ombres
Layout avec Grid
display: grid;
grid-template-columns: center;
gap: 3px;
Responsive avec Tailwind
Tailwind est responsive par défaut.
Mobile tablette Desktop
Breakpoints standards CSS
Ce sont les tailles d’écran les plus courantes :
● ≤ 600px ⇒ Mobile
● 600px - 900px ⇒ Tablette
● ≥ 900px ⇒ Desktop
Exemple d’utilisation :
Breakpoints Tailwind
Classe Taille
sm: ≥ 640px
md: ≥ 768px
lg: ≥ 1024px
xl: ≥ 1280px
Objectif : vitesse + cohérence + productivité
Pratique | Responsive avec Flexbox
Plutôt cool n’est-ce
pas ? 😁
Pratique | Maintenant on CODE 😁
Pratique | Un peu plus de CODE 😁
Pratique | Un peu plus de CODE 😁
Pratique | Encore du CODE 😁
CODEZ CE TEMPLATE ET PROPOSEZ UNE VUE POUR TELEPHONE MOBILE
======== > GreenVest — Smart Solutions for Modern Agriculture
Ressources utiles
Ressource Lien
TailwindCSS Docs [Link]
[Link]
CSS
erence
[Link]
Devoir spécial sur Dribble
rt-Solutions-for-Modern-Agriculture