• Tout public

Comprendre le fonctionnement et la philosophie de Tailwind CSS

Installer et configurer Tailwind CSS dans un projet moderne

Utiliser les utilitaires Tailwind pour structurer et styliser une interface

Gérer la typographie, les couleurs, les espacements et la mise en page

Créer des composants réutilisables avec Tailwind

Utiliser les variantes (hover, focus, responsive…)

Personnaliser Tailwind via le fichier de configuration

Mettre en œuvre l’optimisation et la purge des classes inutilisées

Intégrer Tailwind avec un framework JS (Svelte, React, Vue…)

Concevoir une interface responsive complète et cohérente

Module 1 – Introduction à Tailwind CSS

Présentation du framework et avantages

Fonctionnement basé sur les classes utilitaires

Installation via CDN ou Node.js

Module 2 – Structure d’un projet Tailwind

Configuration tailwind.config.js

Setup avec Vite, Webpack ou frameworks front-end

Organisation des fichiers CSS

Module 3 – Utilitaires essentiels

Couleurs, typographie, spacing

Layout, flexbox, grid

Borders, shadows, backgrounds

Module 4 – Variantes et responsive design

Mobile-first et breakpoints

Variantes d’état (hover, focus, active)

Dark mode et gestion des thèmes

Module 5 – Composants et patterns

Construction de composants UI cohérents

Réutilisation de combinaisons de classes

Plugins officiels et plugins tiers

Module 6 – Personnalisation avancée

Étendre les utilitaires dans la configuration

Customisation des couleurs, fonts et espacements

Création d’utilitaires personnalisés

Module 7 – Optimisation et production

Purge CSS / Content

Gestion de la performance

Déploiement d’un projet Tailwind optimisé

Module 8 – Intégration avec des frameworks

Tailwind avec Svelte, React, Vue, Next.js ou SvelteKit

Approches component-based

Exemples pratiques d’intégration

Connaissances de base en HTML et CSS

Notions de responsive design

Connaissances en JavaScript recommandées selon l’environnement choisi

Durée en centre : 50 heures
Durée totale : 50 heures

Formacode (Domaines de formation) :

• 30801 Langage CSS
• 71954 Framework

Rome (Métiers) :

• M1805 Études et développement informatique

NSF (Spécialités de formation) :

• 326 Informatique, traitement de l'information, réseaux de transmission des données