> Formations > Technologies numériques > Technologies web > Développer avec des frameworks web > Formation Tailwind CSS, maîtrise et bonnes pratiques
Vous avez déjà un compte client ORSYS
Se connecter
Vous êtes nouveau chez ORSYS
Créer un compte
Vous ne souhaitez pas créer de compte
Poursuivre sans me connecter

Formation : Tailwind CSS, maîtrise et bonnes pratiques

Créez et personnalisez des interfaces web modernes avec Tailwind CSS

Tailwind CSS, maîtrise et bonnes pratiques

Créez et personnalisez des interfaces web modernes avec Tailwind CSS


Nouvelle formation

La conception d’interfaces web modernes exige rapidité, cohérence et adaptabilité. Cette formation Tailwind CSS vous permettra de maîtriser ce framework utility-first pour créer des designs responsives, performants et maintenables. La formation couvre à la fois Tailwind CSS 4.x (dernière version) et Tailwind CSS 3.x, encore largement utilisée en production.


INTER
INTRA
SUR MESURE

Cours pratique en présentiel ou à distance
Disponible en anglais, à la demande

Réf. TCS
  2j - 14h00
Prix : 1370 € H.T.

Télécharger le programme

Partager cette formation




La conception d’interfaces web modernes exige rapidité, cohérence et adaptabilité. Cette formation Tailwind CSS vous permettra de maîtriser ce framework utility-first pour créer des designs responsives, performants et maintenables. La formation couvre à la fois Tailwind CSS 4.x (dernière version) et Tailwind CSS 3.x, encore largement utilisée en production.


Objectifs pédagogiques
À l’issue de la formation, le participant sera en mesure de :
Comprendre les principes de Tailwind CSS et mettre en place un projet
Maîtriser les classes utilitaires de base et créer une première interface responsive
Personnaliser Tailwind et construire une bibliothèque de composants réutilisables
Intégrer Tailwind dans un projet professionnel maintenable et optimisé

Public concerné
Développeurs front end, intégrateurs web, web designers.

Prérequis
Connaissances de base en HTML et CSS. Une expérience avec un framework JavaScript (React, Vue ou Angular) est un plus.
Vérifiez que vous avez les prérequis nécessaires pour profiter pleinement de cette formation en faisant  ce test.

Méthodes et moyens pédagogiques
Travaux pratiques
Suite de travaux pratiques permettant le développement incrémental d'une véritable solution d'intégration d'applications d'entreprise.
Méthodes pédagogiques
Exposés théoriques accompagnés d'exemples de mise en œuvre puis utilisation des connaissances acquises pour la réalisation d'un projet fil rouge.

Modalités d'évaluation
Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…
Le participant complète également un test de positionnement en amont et en aval pour valider les compétences acquises.

Programme de la formation

1
Fondamentaux et mise en place

  • Introduction et philosophie utility-first.
  • Comparaison avec CSS classique et frameworks.
  • Installation via CDN et outils modernes (Vite, Bun).
  • Rôle et usage du fichier tailwind.config.js.
  • Organisation de la structure d’un projet.
  • Découverte des classes générées automatiquement.
Travaux pratiques
Créer un projet Tailwind et appliquer les premières classes.

2
Classes utilitaires et responsivité

  • Typographie et couleurs de texte.
  • Espacements avec margin, padding et gap.
  • Mise en page avec flexbox et grid.
  • Couleurs, bordures et arrière-plans.
  • Breakpoints et design responsive.
  • Variantes : hover, focus, dark mode.
Travaux pratiques
Réaliser une page responsive complète.

3
Personnalisation et composants réutilisables

  • Adapter la palette de couleurs à une charte graphique.
  • Définir typographies, tailles et breakpoints personnalisés.
  • Utiliser les plug-ins officiels (forms, typography, aspect-ratio).
  • Découvrir des plug-ins tiers (daisyUI, tailwind-variants).
  • Exploiter les directives Tailwind 4.x (@theme, @layer, @plugin, @apply).
  • Créer des composants réutilisables.
Travaux pratiques
Construire une bibliothèque de composants personnalisés.

4
Projet professionnel et optimisation

  • Réaliser un dashboard d’administration complet.
  • Styliser tableaux et formulaires.
  • Appliquer les règles d’accessibilité intégrées.
  • Optimiser la taille du CSS avec purge intégrée.
  • Intégrer Tailwind avec des outils modernes (Vite, Bun) et frameworks (React, Vue, Angular).
  • Contrôler performance et accessibilité avec Lighthouse.
Travaux pratiques
Finaliser et optimiser le dashboard complet.


Dates et lieux
Sélectionnez votre lieu ou optez pour la classe à distance puis choisissez votre date.
Classe à distance

Dernières places
Date garantie en présentiel ou à distance
Session garantie