Formation Tailwind CSS & Shadcn/ui : Construire des interfaces design systems en un temps record

Programme de la formation
Tailwind CSS & Shadcn/ui : Construire des interfaces design systems en un temps record

• Introduction à Tailwind CSS et configuration de l'environnement

  - Configurer un projet pour Tailwind CSS.
  - Appliquer des utilitaires CSS de base pour styliser des éléments HTML.
  - Utiliser le mode JIT de Tailwind CSS pour un développement rapide.

• Maîtrise des utilitaires Tailwind CSS avancés

  - Appliquer des classes utilitaires pour le responsive design.
  - Utiliser les utilitaires pour les états (hover, focus) et les pseudo-éléments.
  - Optimiser la taille des fichiers CSS générés avec PurgeCSS.

• Personnalisation du thème Tailwind CSS

  - Configurer un thème personnalisé avec Tailwind CSS.
  - Étendre les couleurs, polices et espacements par défaut.
  - Intégrer des plugins PostCSS pour des fonctionnalités CSS avancées.

• Introduction à Shadcn/ui et intégration de composants

  - Intégrer des composants Shadcn/ui dans un projet existant.
  - Installer les dépendances nécessaires pour Shadcn/ui.
  - Utiliser les commandes CLI pour ajouter des composants UI.

• Stylisation et personnalisation des composants Shadcn/ui

  - Appliquer des utilitaires Tailwind CSS aux composants Shadcn/ui.
  - Modifier les styles par défaut des composants UI.
  - Créer des variantes de composants Shadcn/ui.

• Structuration d'une interface avec un Design System

  - Structurer une interface utilisateur basée sur un design system.
  - Définir des conventions de nommage pour les classes CSS.
  - Organiser les fichiers de composants et de styles.

• Création de layouts responsives et accessibles

  - Développer une landing page responsive stylisée avec Tailwind CSS.
  - Assurer l'accessibilité des interfaces construites.
  - Tester la réactivité des layouts sur différents appareils.

• Optimisation et déploiement d'applications avec Tailwind CSS et Shadcn/ui

  - Optimiser le rendu visuel d'une application web.
  - Réduire la taille finale du bundle CSS.
  - Préparer une application pour le déploiement en production.