//. 071 Commencer avec Tailwind CSS en 2023

Sommaire :
00:00:00 Intro
00:03:00 Présentation de TailwindCSS
00:13:20 Séparation du contenu et du style ?
00:18:00 Faire du custom avec TailwindCSS
00:28:50 Installation de TailwindCSS
00:33:00 Les extensions pour les IDE
00:42:22 Les plugins pour TailwindCSS
00:49:00 Tips and tricks pour TailwindCSS
00:54:40 Les librairies UI basées sur TailwindCSS
01:08:30 v0 l'AI generatrice de composants basés sur TailwindCSS
01:12:00 Conclusion

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 :

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. É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

### Tips and tricks

Articles qui regroupent des bonnes pratiques :

### Lib dérivé de Tailwind

### UI library

Bonne écoute !

Retrouvez Double Slash sur :

Les plateformes de podcast :

[damien_s_]

Une nouvelle vidéo de double slash, ça redore une journée ça :)

[pierrenapoletano]

Execellente vidéo, vous prenez bien le temps d'expliquer

[folklibellule]

Trop bien cet épisode; trois ans après le premier ! 😉

[moneyfr]

Unocss c'est une folie. Si vous avez un mail je vous envoie une demo de ma config

[TheRicoco]

Je regardais justement le vieille épisode hier en me disant que j’avais hâte à la mise à jour promise lors des derniers épisodes ❤

[TheRicoco]

Mon mentor, très à l'aise en CSS, n'apprécie pas du tout TailwindCSS. Ses arguments: 1) Cela va à l'encontre de toutes les bonnes pratiques du CSS, avec des !important partout. 2) C'est mauvais en terme de performance car cela demande beaucoup de calculs au navigateur pour trouver toutes les classes (apparemment, il vaut mieux limiter le nombre de classes). 3) Il pense que c'est surtout utile pour des devs fullstack qui ne font pas d'effort sur le CSS. Apparemment pour lui et les autres personnes très à l'aise en CSS, c'est vraiment pénible de travailler sur des projets implémentant TailwindCSS. Je serai intéressé d'avoir votre retour :)

[moneyfr]

Regradez mastercss c'est mieux que tailwind moins bien que unocss