Aller au contenu principal

Développeur framework Tailwind CSS

Date de mise à jour :
Identifiant Offre Info : 04_2586880F
Organisme responsable : Vivaneo (ouvre dans un nouvel onglet)

Nouvelle recherche

Présentation de la formation

Objectifs

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…

  • 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

Programme de la formation

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…

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

Validation et sanction

  • Savoir construire des interfaces modernes avec Tailwind CSS
  • Maîtriser les classes utilitaires et la logique responsive
  • Créer et maintenir une base de composants cohérente
  • Optimiser le code CSS pour la production
  • Intégrer Tailwind dans un environnement professionnel

Type de formation

Non certifiante

Niveau de sortie

Sans niveau spécifique

Durée, rythme, financement

Durée

En centre

50 h

Financement

Conventionnement
Oui
Financeurs
  • Autre

    Programme : Autre dispositif, Plan de développement des compétences

  • Bénéficiaire de l'action

    Programme : Autre dispositif, Plan de développement des compétences

  • Entreprise

    Programme : Autre dispositif, Plan de développement des compétences

  • OPCO

    Programme : Autre dispositif, Plan de développement des compétences

Conditions d'accès

Publics visés

  • Salarié
  • Tout public

Niveau d'entrée

Sans niveau spécifique

Conditions spécifiques et prérequis

Connaissances de base en HTML et CSS Notions de responsive design Connaissances en JavaScript recommandées selon l'environnement choisi

Lieu de réalisation de l'action

Modalités d'enseignement

Formation entièrement en présentielle

Adresse

Rue de la Brigantine
50100 Cherbourg-en-Cotentin

Responsable : Hôtel Chantereyne

Périodes prévisibles de déroulement des sessions

Début

Fin

Adresse d'inscription
28 Rue du Chemin Vert
75011 Paris 11e
État du recrutement
Ouvert
Modalités
Entrées / Sorties à dates permanentes