Quelle est la durée de la formation "Tailwind CSS + shadcn/ui : design system code" ?

La formation "Tailwind CSS + shadcn/ui : design system code" dure 14 h. Cette durée peut être adaptée selon le programme retenu (formules intra-entreprise sur-mesure).

À qui s'adresse la formation "Tailwind CSS + shadcn/ui : design system code" ?

Devs front-end (React, Vue, Astro) Designers techniques

Quels sont les prérequis pour suivre cette formation ?

HTML/CSS solide + React ou Vue Une très bonne connexion internet est requise pour le format distanciel synchrone

Comment se déroule la formation ?

La formation est dispensée en Présentiel · Visio. Elle peut être organisée en intra-entreprise (dans vos locaux ou en visio, programme et dates adaptés) ou en inter-entreprise (sessions catalogue avec d'autres participants).

Cette formation est-elle finançable par les OPCO ?

Oui. HM Formation est un organisme certifié Qualiopi (catégorie Actions de formation), ce qui permet la prise en charge par tous les OPCO (AKTO, OPCO 2i, OPCO EP, AFDAS, ATLAS, etc.) et par les financeurs publics (Mon Compte Formation, Pôle Emploi, Région).

Quelle certification est délivrée à l'issue de la formation ?

Une attestation individuelle de formation (article L.6353-1 du Code du travail) est délivrée à chaque participant, mentionnant les acquis de l'apprenant et accompagnée de la grille d'évaluation des compétences.

Fondamentaux développement web

Tailwind CSS + shadcn/ui : design system code

14 h Présentiel Visio IntraInter

Formation 2 jours sur Tailwind CSS + shadcn/ui, le combo dominant pour construire un design system code-first moderne. Pour devs front-end qui veulent productivité maximale.

2 Public concerné

Devs front-end (React, Vue, Astro)
Designers techniques

3 Prérequis

HTML/CSS solide + React ou Vue
Une très bonne connexion internet est requise pour le format distanciel synchrone

4 Objectifs pédagogiques opérationnels

Maîtriser Tailwind CSS utility-first
Configurer un design system (couleurs, typo, spacing)
Utiliser shadcn/ui (composants copy-paste)
Adapter et étendre shadcn/ui à sa charte
Optimiser pour la production (purge, JIT)

5 Contenu détaillé

Tailwind CSS : philosophy

Utility-first vs CSS classique
Setup avec Vite, Next.js, Astro
Config Tailwind 4 (zero-config)

Design system code

Theme tokens (colors, fonts, spacing)
Dark mode
Responsive breakpoints

shadcn/ui

CLI et installation
Composants copy-paste
Customisation par projet

Patterns et productivité

@apply pour DRY
Plugins Tailwind (forms, typography, aspect-ratio)
Composants réutilisables

Production

Build et purge automatique
Optimisation taille CSS
Tooling (Prettier, ESLint plugins)

6 Méthodes pédagogiques

En amont de la formation

Échange préparatoire avec le bénéficiaire pour cerner le contexte et les attentes
Recueil des situations concrètes rencontrées par le participant
Adaptation du contenu au profil et au niveau

Pendant la formation

La formation combine systématiquement apports théoriques et applications pratiques :

Apports théoriques et méthodologiques
Études de cas et mises en situation
Exercices pratiques
Échanges entre pairs
Auto-diagnostic et plan d'action individuel

7 Moyens pédagogiques et techniques

Environnement (selon le format choisi)

Format présentiel : salle équipée mise à disposition par le bénéficiaire ou par HM Formation
Format distanciel : poste équipé, connexion internet stable, casque/micro/webcam

Matériel et infrastructures fournis par HM Formation

Ordinateurs équipés des logiciels nécessaires (sessions inter en présentiel)
Vidéoprojecteur, écran, paperboard
Connexion internet haut débit
Accès aux licences logicielles le cas échéant

Supports pédagogiques

Livret participant
Fiches outils
Cas pratiques
Bibliographie de référence

Encadrement

Formateur expert sur la thématique, intervenant terrain

8 Modalités d'évaluation

Évaluation des acquis

Évaluation initiale (positionnement) au début de la formation
Exercices pratiques et études de cas tout au long de la formation
Évaluation finale (QCM, mise en situation ou production selon le thème)

Évaluation de l'appréciation des participants

Questionnaire à chaud en fin de session
Questionnaire à froid 2 à 3 mois après la formation pour mesurer le réinvestissement

Suivi de l'action de formation

Feuille d'émargement co-signée par demi-journée ou par séance de formation (format visio synchrone)

9 Informations pratiques

Organisation du temps

Pour les sessions intra-entreprise

Dates et horaires définis en concertation avec l'entreprise cliente
Durée selon programme (voir page formation)
Lieu : dans vos locaux ou en visio synchrone

Pour les sessions inter-entreprise

Sessions planifiées au calendrier (voir dates dans la barre latérale)
Lieu : centre de formation HM Formation ou en visio synchrone

Modalité

Modalité applicable : Présentiel · Visio (visio synchrone)
La modalité est confirmée avec le participant en amont de la formation
Possibilité d'adaptation selon les contraintes du commanditaire (intra-entreprise)

Assistance pédagogique et technique

Une assistance technique est disponible par email à info@hmformation.fr ou par téléphone au 01 82 02 15 75. Une assistance en direct est assurée pendant les horaires d'ouverture. En dehors de ces horaires, toute demande fait l'objet d'une réponse sous 24 heures ouvrées.

Accessibilité aux personnes en situation de handicap

HM Formation étudie avec le participant et son employeur les adaptations nécessaires pour rendre la formation accessible aux personnes en situation de handicap, en tenant compte des contraintes du poste de travail et du format choisi (présentiel/Visio synchrone).

Un référent handicap est disponible pour échanger sur les besoins spécifiques.

10 Validation

Attestation individuelle de formation (L.6353-1 du Code du travail) mentionnant les acquis de l'apprenant, accompagnée de la grille d'évaluation des compétences.