Maîtriser ce Framework CSS
Tailwind de A à Z.
😤 T’en as marre de créer un fichier CSS par page ou pire, par composant ?
Et de devoir nommer des classes comme .container-wrapper-bis-v2 juste pour aligner une div ?
🧨 Et quand tu veux modifier un truc ?
Tu cherches où est le style, tu galères avec la spécificité des sélecteurs, et tu casses autre chose sans comprendre pourquoi.
🎯 Tu veux juste que ça marche. Et vite.
Mais entre le CSS, les médias queries, et les classnames à rallonge, t’as l’impression de reculer.
💡 Et si tu pouvais tout faire… directement dans ton HTML ?
Pas de fichier CSS. Pas de prise de tête. Juste des classes utilitaires ultra puissantes.
🚀 C’est ça, Tailwind CSS v4.
Tu écris. Tu vois le résultat. Tu crées. Tu intègres. C'est instantané.
🎨 Tu deviens un artiste du layout.
Tu joues avec les classes comme avec des Legos. Et tu fais du design de qualité… sans être designer.
🧘♂️ Moins de prises de tête = plus de plaisir à coder.
Fini les bugs CSS incompréhensibles.Tu changes une classe → tu vois le résultat → c’est satisfaisant.
💻 Une compétence clé et ultra moderne.
React, Vue, Next, Svelte, Nuxt... Tailwind est l'outil le plus utilisé pour styliser les apps web.
📂 Un nombre de fichiers divisé par deux !
Lorsqu'on utilise un framework et qu'on le stylise avec SASS,
styled components, du CSS natif et j'en passe, on doit souvent
créer un fichier de style pour chaque composant !
Sans parler des
fichiers de configuration en plus.
Avec Tailwind, le CSS est codé
dans le composant !
Ton dossier global est plus léger, plus
agréable à parcourir, tu es plus productif ... et moins stressé.
🤔 Ok, mais c'est surement complexe, non ?
La barrière d'entrée est ridiculement basse, il suffit d'utiliser
des classes utilitaires.
Néanmoins, il faut fournir quelques
efforts pour parfaitement comprendre tout ce qui se passe sous le
capot, et comment gérer la personnalisation, l'ajout d'un thème,
etc ...
🔥 Ce n’est pas juste un framework CSS.
C’est une nouvelle façon de penser le Front End. Plus rapide. Plus précise. Plus fun.
✅ C’est pour ça que j’ai créé ce cours.
Un bootcamp complet sur Tailwind v4 pour te faire coder des apps web stylées en un clin d'oeil. Tu vas apprendre à :
- Structurer des interfaces modernes en un temps record
- Styliser de manière ultra rapide, en restant dans l'html/jsx/template/etc...
- Créer du responsive, du dark mode, des animations, des composants
- Construire une base réutilisable pour tous tes futurs projets
- T'entraîner à l'aide d'exercices d'intégration
- Coder un projet complet
🎁 Bonus inclus :
- Une grande documentation fait maison, qui va t'aider à tout comprendre très facilement.
- 10 exercices géniaux pour te faire pratiquer.
- Du code réutilisable pour tous tes projets futurs.
🧠 En quelques jours :
Tu comprends Tailwind.
Tu crées des interfaces géniales en un temps record.
Tu es un dev heureux !
Tu te poses sûrement des questions ...
❓ "Mais je ne suis pas bon en Design"
Tailwind propose un design system de base cohérent, élégant, et prêt à l’emploi, qui te fera passer pour le De Vinci du web sans forcer.
❓ "J’ai pas envie d’apprendre encore un nouveau framework…"
⚡ Ce n’est pas un framework, c’est un accélérateur de productivité. Et t’as rien à apprendre par cœur. T’écris, tu vois direct, tu progresses naturellement.
❓ "C’est pas trop le bazar d’avoir plein de classes dans le HTML ?"
Je ne vais pas te le cacher, c'est le meilleur argument contre Tailwind. Si on utilise que des classes utilitaires, alors le HTML va avoir l'air énorme, non ?Pas forcément, et ce n'est pas aussi terrible qu'on l'imagine: 1. Beaucoup d'éléments sont stylisés avec deux ou trois classes, donc super simples à comprendre.
- 1. Beaucoup d'éléments sont stylisés avec deux ou trois classes, donc super simples à comprendre.
- 2. Je t'explique comment mettre en place un certain ordre de classes utilitaires afin de t'y retrouver plus facilement.
- 3. Je te donne des astuces de débogage à la sauce Tailwind pour trouver ce que tu cherches en un éclair.
❓ "Est-ce que c’est vraiment utile avec React/Vue/Next/SvelteKit/etc... ?"
🧠 C’est fait pour ça, vraiment.
Tailwind s’intègre parfaitement
avec tous les frameworks modernes, et te fait gagner un temps fou
pour les composants.
Ça divise également ton nombre de fichiers, ce
qui rend ton architecture de fichiers bien plus agréable.
❓ "Et si je veux un design unique ?"
🎛️ Tu peux tout personnaliser.Chaque couleur, chaque taille, chaque typo peut être changées via le fichier de config.Ton design, tes règles.
❓ "Mais j’ai pas le temps pour une grosse formation..."
⏱️ Pas besoin.Le cours est découpé en blocs courts, concrets, que tu peux suivre à ton rythme.Tu peux apprendre en 15 minutes par jour, et progresser dès le premier soir.
❓ "Est-ce que c’est à jour avec la dernière version ?"
✅ Le cours est basé sur Tailwind v4, la version la plus récente
et la plus puissante à ce jour.
Je mets également mes cours à jour
dès qu'une nouvelle version sort ou qu'une nouvelle fonctionnalité
intéressante est proposée.
Et je rajoute ce contenu gratuitement à
tous ceux qui possèdent déjà le cours. Alors que je pourrais très
bien faire un cours différent par version. 🎁
❓ "Pourquoi ce cours plutôt qu’un tuto gratuit ?"
💎 Les tutos YouTube t'apprennent à copier.Ce bootcamp t'apprends
à comprendre, structurer, et créer par toi-même.
C’est pas juste un
tuto.
C’est une montée en compétence.
Je te donne mon XP de dev
qui utilise Tailwind depuis la V1, et qui a créé et mis à jour ce
cours depuis la sortie de Tailwind.
⚠️ Attention : Ce n’est pas pour ceux qui veulent juste regarder sans pratiquer.
Mais si tu veux progresser vite, de manière concrète, tu es au bon
endroit.
Il te suffit de suivre les vidéos avec moi, en codant à
mes côtés et en reproduisant les exemples pour bien les intégrer
et mémoriser les concepts les plus importants.
💸 Et le prix ?
Clairement, je ne me fiche pas de mes élèves, tu peux obtenir ce cours pour une bouchée de pain, recevoir des mises à jour gratuitement et apprendre une compétence clé du web en quelques heures.
À toi de jouer.
Rejoins le cours Tailwind v4 maintenant.
Apprends à créer de belles interfaces rapidement et efficacement.
On se retrouve juste après. 💻
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du cours
- Gérer les espacement (6:59)
- Appliquer des dimensions (6:17)
- Intégration d'un "Design System" VS "Designing in the browser" (4:49)
- La typographie (7:56)
- Couleurs et fonds (6:09)
- Bordures et effets de bordure (3:42)
- La disposition partie 1 (6:24)
- La disposition partie 2 (5:07)
- Utiliser Flexbox avec Tailwind (6:00)
- Utiliser CSS Grid avec Tailwind (9:09)
- La personnalisation partie 1 (7:18)
- La personnalisation partie 2 (6:38)
- Utiliser les "layers" (6:51)
- Les variants partie 1 (7:51)
- Les variants partie 2 (4:48)
- Gérer le "responsive" partie 1 (4:43)
- Gérer le "responsive" partie 2 (4:49)
- Animations et transitions (7:00)
- Ajouter un mode sombre ("dark mode") partie 1 (8:28)
- Ajouter un mode sombre ("dark mode") partie 2 (7:42)
- Ajouter un mode sombre ("dark mode") partie 3 (5:09)
- Créer des fichiers CSS séparés (11:11)
- Introduction exercice 1 : Section "call to action" (1:34)
- Résolution exercice 1 : Section "call to action" (8:56)
- Introduction exercice 2 : Section "newsletter" (0:35)
- Résolution exercice 2 : Section "newsletter" (10:40)
- Introduction exercice 3 : Composant carte (0:38)
- Résolution exercice 3 : Composant carte (9:31)
- Introduction exercice 4 : Liste d'articles de blog (0:29)
- Résolution exercice 4 : Liste d'articles de blog (10:52)
- Résolution exercice 4 : Liste d'articles de blog partie 2 (4:27)
- Introduction exercice 5 : Coder un tableau (0:23)
- Résolution exercice 5 : Coder un tableau (10:21)
- Introduction exercice 6 : Liste e-commerce (0:26)
- Résolution exercice 6 : Liste e-commerce (13:15)
- Explication du bac à sable (5:51)
- Marges et remplissage (10:11)
- Gérer la taille des éléments (6:54)
- La typographie (6:25)
- Les couleurs et les effets (8:13)
- Les bordures et les séparations (3:56)
- La disposition (10:16)
- Utiliser Flexbox (3:48)
- CSS Grid (6:51)
- Faire une installation classique (12:25)
- Installation avec POSTCSS (9:58)
- Gérer le côté réactif (responsive) (5:18)
- La personnalisation, mise en place (4:39)
- La personnalisation CSS (11:18)
- La personnalisation du fichier tailwind.config (14:07)
- Mise en place des concepts de Tailwind (4:30)
- Les animations et les transitions (6:16)
- Le "Dark mode" (5:05)
- Les "modifiers" (5:07)
- Tentez de coder les composants de votre côté !
- 1. Coder une liste de Blog (16:50)
- 2. Coder une section de contenu (7:50)
- 3. Coder un "Call to Action" (8:52)
- 4. Page Ecommerce (7:45)
- 5. Coder un footer (22:45)
- 6. Section "newsletter" (7:18)
- 7. Coder une section "pricing" (14:21)
- 8. Section "Sign up" (17:15)
- 9. Tableau (7:53)
- 10. Créer une liste d'utilisateurs (10:03)
- Tentez également de coder cette landing page en premier.
- Installation de la "Landing page" (5:31)
- Coder une navbar réactive avec TailwindCSS (19:42)
- Coder la page d'accueil (12:53)
- La section "appel à l'action" (9:58)
- Coder un bandeau d'informations (4:53)
- Section "Preuve sociale" (5:43)
- Le formulaire (7:26)
- Le footer (5:02)
- Mise en place du bac à sable (2:47)
- Création du CSS (11:23)
- Les classes liées à la marge et au padding (7:47)
- Gérer width & height (7:56)
- La typographie (4:02)
- Les classes utilitaires de typographie (8:54)
- Gérer le background (4:50)
- Les bordures (6:56)
- La disposition (9:21)
- Flexbox (5:37)
- CSS Grid (5:22)
- Le responsive avec Tailwind (4:04)
- La personnalisation partie 1 (8:51)
- La personnalisation partie 2 (7:47)
- Le Dark mode (4:22)
- Les variants (3:48)
- La purge (4:53)
- Les transitions et animations (4:49)
Cliquez sur les questions
Foire aux questions.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants