Un épisode [Remix] sur TailwindCSS. Nous avions déjà fait un épisode sur l'outil TailwindCSS, le numéro 7, sorti en 2020. Comme ce magnifique outil a évolué depuis, nous voulions refaire un épisode dédié pour réexpliquer le fonctionnement et l’écosystème autour de ce dernier.
Description de TailwindCSS
Tailwind CSS est un framework de développement web populaire et open source qui simplifie la création et la gestion de l'interface utilisateur (UI) de sites web et d'applications. Contrairement à de nombreux autres frameworks CSS, Tailwind CSS adopte une approche basée sur les classes CSS utilitaires pour styliser et agencer les éléments HTML.
Voici quelques caractéristiques clés de Tailwind CSS :
- Classes CSS utilitaires : Tailwind CSS fournit un grand nombre de classes CSS pré-définies qui peuvent être appliquées directement aux éléments HTML pour définir des styles, des marges, des rembourrages, des couleurs, des polices, des tailles, etc. Ces classes sont nommées de manière intuitive, ce qui les rend faciles à comprendre et à utiliser.
- Personnalisable : Bien que Tailwind CSS propose une grande variété de classes prédéfinies, il est également hautement personnalisable. Vous pouvez créer des classes personnalisées pour répondre aux besoins spécifiques de votre projet ou modifier les valeurs par défaut du framework pour adapter les styles à votre design.
- Conception responsive : Tailwind CSS facilite la création de mises en page réactives en utilisant des classes dédiées pour gérer la visibilité des éléments sur différents appareils et résolutions d'écran.
- Productivité accrue : En utilisant des classes utilitaires, les développeurs peuvent rapidement construire et itérer sur l'interface utilisateur sans avoir à écrire beaucoup de CSS personnalisé. Cela peut accélérer le développement web.
- Performance optimisée : Tailwind CSS est conçu pour générer un CSS minimal et optimisé pour la production, ce qui contribue à des temps de chargement plus rapides.
- Écosystème en expansion : Il existe de nombreuses extensions, plugins et outils créés par la communauté Tailwind pour étendre les fonctionnalités du framework et l'intégrer facilement dans divers environnements de développement.
En résumé, Tailwind CSS est un framework CSS qui mise sur des classes utilitaires pour simplifier le développement web en permettant aux développeurs de styliser et de structurer leur interface utilisateur de manière efficace et personnalisable. Son approche modulaire, sa flexibilité et sa popularité croissante en font un choix attrayant pour de nombreux projets web modernes.
Plugins/themes
Article qui regroupe une liste de plugins : Medevel
Tips and tricks
Articles qui regroupent des bonnes pratiques :
- https://www.builder.io/blog/tailwind-css-tips-and-tricks
- https://www.hyperui.dev/blog/how-to-write-better-tailwindcss
- https://medium.com/@sididev3/6-simple-tricks-90-of-people-who-use-tailwind-css-dont-know-26c6a1318476
Lib dérivé de Tailwind
UI library
- Tailwind UI
- https://daisyui.com/
- https://floatui.com/
- https://flowbite.com/
- Preline UI
- https://tailwind-elements.com/
- https://lunarui.dev/
- shadcn/ui
Bonne écoute !