Coder un Toggle Switch avec Tailwind CSS, sans JS !

Parfaitement Web

Codons un checkbox animé ou toggle switch personnalisé à l’aide de TailwindCSS en CSS/HTML sans utiliser de JavaScript ou librairie externe.📹 Apprendre Grid CSS : https://youtu.be/tcrAaPIZbLo📹 Coder un Toggle Switch avec Tailwind CSS : https://youtu.be/zof8bE3N7xM📚 Documentation de Tailwind CSS : https://tailwindcss.com/ 🖥️ Abonnez-vous sur YouTube : https://www.youtube.com/parfaitementweb?sub_confirmation=1Chapitres :00:00 Faire un Toggle Switch en CSS00:16 Installer Tailwind CSS 3 via CDN00:26 Utiliser une configuration personnalisée avec le CDN de Tailwind00:44 Center un élément verticalement en CSS avec flexbox01:20 Création du label01:30 Rendre le texte du checkbox clickable02:13 Habiller le label visuellement02:45 Créer le toggle switch personnalisable en CSS03:30 Qu’est-ce que la pseudo-class ::after ?04:45 Rendre le toggle switch responsif05:20 Animer le switch en fonction de l’attribut checked05:30 Comment utiliser peer: et peer-check: en TailwindCSS ?07:00 Animation du bouton en CSS via translate et translate-x08:45 Supporter la navigation au clavier11:05 Conclusion👨‍💻 Qui suis-je ?Je m’appelle Alexis et je suis développeur web full stack (front-end et back-end) ainsi que gérant d’une agence web spécialisée dans le développement PHP, Laravel & WordPress depuis plus de 15 ans. Au fil des années, autodidicate, j’ai eu l’occasion d’apprendre et maitriser un grand nombre de langages de programmations et technologies de développement comme PHP, Laravel, MySQL, Python, HTML, CSS, JavaScript, VueJs, NodeJS, React, Angular. Je propose des cours de développement web et formations complètes pour devenir développeur ou apprendre à développer ainsi que partager mes conseils et retours d’expériences qui seront utiles à tous les développeurs freelance.