Comment convaincre ton patron d'utiliser Tailwind CSS

Essayer quelque chose est le premier pas pour l'aimer.

Tailwind peut diviser la communauté des développeurs parfois : il y a des fans inconditionnels et des détracteurs à la gâchette facile. Cependant, il existe de nombreux témoignages de personnes qui ont été initialement rebutées par la syntaxe ou les fonctionnalités jusqu'à ce qu'elles l'essaient.

I didn't think I was going to like @tailwindcss... spent a day using it for a POC, love it! I wish this had been around when we started our company design system, seriously considering a complete rebuild 😂

Jon Bloomer

La meilleure façon de présenter Tailwind à ton patron ou à tes collègues n'est probablement pas de le présenter comme un framework CSS. C'est quelque chose de plus bas niveau, qui te permet d'entrer dans les moindres détails.

Tailwind n'est pas un framework CSS, c'est une API pour ton design system.

Personnalisation 🎨

Les frameworks CSS traditionnels te remettent une suite de classes, et parfois de composants, avec un style prédéfini. Si tu as un design personnalisé, tu dois souvent remplacer certains des styles et systèmes par défaut. C'est fastidieux, ça prend du temps et alourdit ton code en production.

Pour être rapidement opérationnel, Tailwind est livré avec d'excellents styles par défaut, créés de A à Z par leur équipe de design. Le plus intéressant, c'est qu'il est entièrement personnalisable, ce qui signifie que tu peux avoir tes propres styles sans ajouter de code inutile à ta feuille de style.

Tailwind produit un code de production allégé sans perdre de temps à remplacer les styles par défaut.

Le site web du jeu vidéo Borderlands est un excellent exemple d'une configuration personnalisée de Tailwind.

Performances 🏎

Le code de production épuré produit par Tailwind est étonnant en termes de performances, il ne fait en moyenne que 10 Ko !

Il a été prouvé que les sites web performants ont un taux de rebond plus faible, ce qui entraîne une plus grande conversion des utilisateurs. C'est logique, car plus le temps de chargement est court, plus l'utilisateur peut accéder rapidement à ce qu'il recherche.

Cet article sur web.dev contient d'excellents exemples

Tailwind est excellent pour les performances de ton application. Il te permet d'obtenir des CSS ultra-rapides sans effort et t'aide à attirer davantage d'utilisateurs.

Portabilité 🎒

Il existe un nombre infini de stacks technique différentes et il peut être difficile de faire correspondre tous les éléments. Heureusement, Tailwind est agnostique au niveau du front-end, donc peu importe ce que tu utilises, il s'intégrera parfaitement.

Si ton entreprise décide de passer d'une stack à une autre, tu peux emporter ton design system avec toi, sans poser de questions. Tout ce dont tu as besoin se trouve dans le fichier de configuration.

Tailwind est extrêmement flexible et peut s'adapter à tout environnement de développement web.

Productivité 📈

L'expérience pour les développeurs et la vitesse de développement sont des facteurs importants dans le choix de tes outils. Les avantages de Tailwind en termes de productivité ne sont pas à prendre à la légère et peuvent accélérer considérablement ton flux de travail.

Changement de contexte 🧠

Une chose que l'on oublie souvent lorsqu'on écrit du HTML/CSS est la nécessité de changer de contexte. Ton cerveau passe constamment d'un langage et d'un fichier à l'autre pour s'adapter à la tâche à accomplir. Cela peut sembler lent et assez lourd si tu as plusieurs documents ouverts en même temps.

Avec Tailwind, tu écris ton CSS de manière déclarative dans ton HTML, ce qui te permet d'appliquer tes styles tout en restant concentré. Les classes utilitaires dans ton HTML facilitent également la lecture du code, puisque la structure et les styles se trouvent au même endroit.

Cette approche permet aux développeurs d'être plus productifs et d'accumuler moins de fatigue avec une expérience de développement plus fluide.

Nommage 🤔

Combien de fois as-tu vu des noms de classe comme .sidebar-container-wrapper-left dans un projet ? Ils n'ajoutent aucune valeur réelle à la structure de la page et ne donnent aucune indication sur son apparence. Ce type d'élément peut entraîner des bogues, car son objectif et sa portée ne sont pas clairs.

There are only two hard things in Computer Science: cache invalidation and naming things.

Phil Karlton

En tant que développeurs, nous passons probablement plus de temps à réfléchir aux noms des classes qu'à appliquer les styles eux-mêmes. C'est rarement du temps bien utilisé ; cependant, Tailwind soulage ce fardeau en fournissant des tonnes de classes utilitaires utilisant des conventions de nommage intuitives.

Ces conventions signifient que toi et ton équipe suit les mêmes règles, ce qui te permettra de mieux te concentrer et d'uniformiser ta base de code.

Tu peux arrêter de perdre du temps à penser à des noms de classes sans signification et te concentrer sur les vrais problèmes.

Maintenance 🚧

Have been working with CSS for over ten years and Tailwind just makes my life easier. It is still CSS and you use flex grid etc but just quicker to write and maintain.

Debbie O'Brien

Onboarding 🚢

Les noms de classe uniformes fournis par Tailwind permettent une intégration rapide des mainteneurs. Cela peut être particulièrement utile dans les grandes entreprises où les développeurs peuvent aller et venir régulièrement. Un système CSS personnalisé nécessitera un temps variable d'apprentissage et de reproduction.

Grâce aux conventions de nommage et aux classes de Tailwind, les nouveaux développeurs ne perdent pas de temps.

CSS à l'échelle 🚀

Un problème qui se pose souvent est celui du fichier CSS qui ne cesse de croître : les classes existantes ne sont pas modifiées de peur de casser quelque chose, alors de nouvelles classes sont ajoutées. Il s'agit d'une mauvaise pratique qui peut entraîner une dette technique considérable et ralentir ton site.

Quelle que soit la taille de ton projet, Tailwind permet à ton CSS d'évoluer sans devenir un monstre incontrôlable. Tu utiliseras très probablement les mêmes valeurs à plusieurs reprises si ton design est cohérent, ce qui signifie que ton fichier CSS ne s'agrandira que très peu au fil du temps.

Ton fichier CSS n'augmentera que très peu au fil du temps, quelle que soit la taille du projet.

Écosystème 🌱

L'équipe à l'origine de Tailwind a également créé toute une série d'outils pour t'aider à développer tes applications.

  • Tailwind UI

    Une bibliothèque premium de composants conçus par des professionnels, entièrement responsives et construits avec Tailwind CSS. Il y a plus de 400 exemples qui vont des champs de texte et des boutons aux pages d'accueil et aux tableaux de bord.

  • Headless UI

    Une collection de composants non stylisés et entièrement accessibles qui s'intègrent parfaitement à Tailwind CSS, construit avec React et Vue. Ils apportent l'interactivité et toi, tu apportes les styles.

Adoption progressive 👷‍♂️

Si ton supérieur hésite à essayer Tailwind dans le cadre d'un projet important, un autre avantage est qu'il est possible de l'intégrer progressivement. Il n'est pas nécessaire de mettre ton projet en attente pendant que tu migres toutes les classes CSS. Comme tu n'es pas obligé de charger toutes les classes utilitaires à l'avance, tu peux dédier un fichier CSS uniquement aux classes Tailwind, puis l'utiliser si nécessaire.

Tu peux ainsi l'intégrer progressivement à ton système, dans de nouveaux composants ou en remaniant les anciens.

Un petit plus 🎁

Voici quelques points finaux qui pourraient bien être la cerise sur le gâteau pour convaincre ton patron ou tes collègues :

  • La documentation

    La documentation est impressionnante, utilisant la recherche intégrée pour une navigation rapide ainsi que des exemples clairs et précis. Tu trouveras tout ce dont tu as besoin.

  • Communauté

    La communauté est très investie et ne cesse de croître. Sur le Discord de Tailwind, il y a toujours quelqu'un pour répondre à tes questions, parfois même les créateurs eux-mêmes.

  • Plugins

    L'écosystème des plugins est vivant et en plein essor. S'il existe un cas particulier qui n'est pas traité par Tailwind de manière native, il y a de fortes chances que quelqu'un ait déjà créé un plugin.

Quel est le verdict, chef ? 👀

Tu n'auras peut-être pas besoin de tous ces exemples pour convaincre ton patron ou tes pairs, mais avec un peu de chance, cela te donnera quelques munitions. Tailwind est un excellent outil à ajouter à la boîte à outils front-end de ton équipe, s'ils l'essaient, le framework devrait s'occuper du reste. Bonne chance !

Autres ressources 📖

Tu es toujours là ? 🤩

As-tu essayé de convaincre ton patron ou tes collègues ? Comment ça s'est passé ?

Dis-le moi sur Twitter ou par courriel ! 👋