Le modèle Tailwind et le Vibe Coding

Oula, oula, le modèle de Tailwind CSS serait en train de s’effondrer ? Baisse de trafic drastique et réduction des effectifs avec 80% de départs…

C’est quoi Tailwind CSS ?

Tailwind CSS est un framework de conception qui utilise une approche utilitaire, permettant de créer des styles en combinant des classes CSS directement dans le code HTML.

Je vais vous expliquer pourquoi Tailwind CSS est populaire et pourquoi son utilisation pourrait diminuer.

Tailwind CSS permet de mettre en forme des interfaces graphiques sur une page web en ne codant pas de CSS (Un fichier avec de code). Cela signifie que nous n’avons pas besoin d’un fichier CSS pour ajouter des styles. On applique des classes (unitaires) dans le code HTML.

CSS, c’est quoi ? CSS c’est Cascading Style Sheet : feuille de mise en forme en Cascade. Ok ?En cascade ! La cascade c’est un système dans lequel la dernière déclaration, où la plus forte (spécifique) prend la main. C’est génial, mais c’est compliqué à gérer pour une personne qui ne sait pas coder de la CSS.

Pourquoi Tailwind c’est bien ?

Parce que y a pas de spécificité. On ne gère plus d’ordre de déclaration. On applique des classes à chaque élément dans le code HTML. Chaque classe CSS est indépendante.

C’est bien pour ce qu’on appelle un développeur FullStack car ça lui fait un langage en moins à gérer. Autre avantage, c’est pas mal pour le prototypage et la logique de composants indépendants. Si on supprime des composants, en plus on a pas de code mort (Code CSS devenu inutile non supprimé).

Cette pratique permet aussi d’avoir un code plus rapide, car le code CSS final est plus simple.

Pourquoi Tailwind c’est pas bien ?

Parce qu’avec Tailwind, un développeur va devoir ajouter un élément de mise en forme sur chaque élément de code, cela donne une soupe de code ; le code devient illisible au point où on ne sait pas si des propriétés sont nécessaires ou non. Si on doit changer un comportement, on doit parfois le changer dans plusieurs fichiers.

Ensuite, avec Tailwind, comme on applique des styles élément par élément ; on ne gère pas véritablement une charte graphique avec des espacements harmonieux (en fonction des tailles d’écran). Avec Tailwind, c’est comme si on appliquait des bouts de scotch un peu partout pour faire tenir les pièces du puzzle ensemble.

Enfin, CSS évolue et permet de gérer des comportement hypers complexes en quelques lignes. Tailwind essaye d’intégrer cela dans son code, mais ce qui tient en 1 ligne de CSS demande de bricoler du langage propre à Tailwind.

Pour schématiser, Tailwind c’est du meuble IKEA. La CSS c’est du meuble en bois massif fait par un artisan.

Tailwind CSS et le Vibe Coding

Problème de modèle économique

Ce qui se passe avec les IA, c’est qu’elles utilisent ce qui est le plus utilisé (il me semble). Donc elle utilise Tailwind. Les IA vont sur le site, lisent la documentation, puis produit des composants d’interface à la demande avec Tailwind.

Le modèle économique de Tailwind c’est de vendre : de la formation, des pages toutes faites, des composants (inscription à la newsletter)… au visiteur du site Tailwind.

Sauf que les développeurs ne vont plus sur le site, puisqu’ils utilisent des IA qui elles vont sur le site Tailwind… mais n’achètent rien.

Baisse de trafic sur le site, baisse des revenus.

Problème d’imitation

On dit que les IA ne créent pas, elles copient (AI’s Memorization Crisis), on appellerait ça la Memorisation.

Dans le cas du Vibe Coding, les IA vont donc créer du code en imitant du code existant, donc en utilisant Tailwind. Ainsi on peut imaginer qu’un grand ensemble des interfaces sont créées avec Tailwind.

Si les besoins des interfaces changent rapidement, comme la gestion de l’économie d’énergie sur les téléphones ou des écrans pliants… Tailwind n’est pas adaptée pour gérer facilement des comportements différents en fonction de conditions spécifiques d’affichage (ex. pour des situations de handicap).

Problème de créativité

Si Tailwind est devenu l’outil pour mettre en forme toutes les interfaces Vibe Codées et que les développeurs de Tailwind ne sont plus rémunérées pour innover et suivre les évolutions du web et de la CSS :

Est-ce que les IA vont stagner ? Qui va leur apprendre des choses nouvelles ? Est-ce que des personnes qui vont développer des nouveaux outils auront intérêt à rédiger de la doc, si c’est pour les IA les pompent ?

Réflexions

L’idée d’utiliser les IA est de se dire que bien configurée, elle va produire le bon code. Donc à tous les problèmes que je viens dénoncer, il suffirait de demander à une IA de tout corriger où de changer son modèle d’écriture de la CSS.

Ok. Sauf que les propriétés CSS dont je vous parle, j’ai l’habitude de la mettre en place au moment où le cas se présente, où au moment ou je prends connaissance de son existence. Comment demander à une IA d’utiliser des propriétés CSS adaptées si je ne sais pas qu’elles existent ?

Ainsi, si je suis à un niveau artisan ébéniste dans un Design System pour une application métier avec des exigences d’accessibilité numérique. Pour des gestions fines de l’accessibilité (une contrainte légale), c’est possible qu’il ne soit pas possible de produire des interfaces adaptées pour les personnes en situation de handicap (gestion de couleur).

Ainsi, avec le Vibe Coding, il est très facile de faire du prototypage, de l'application jetable. Mais si je dois répondre aux contraintes d'accessibilité, il faudra que les prompts de passage de cette application Vibe Codées à une application, toujours Vibe Codée, demande de savoir rédiger des prompts en prenant en compte de l'accessibilité.

Pistes à creuser pour les grands organismes

Si votre entreprise utilise les IA pour la création d’application et que vous êtes soumis à la contrainte légale. Vous devez

1. Créer en interne des formations pour Vibe Coder
2. Avoir des experts accessibilité qui travaillent sur la prise en compte de l’accessibilité par les IA
3. Construire des documentations prenant en compte l’accessibilité pour nourrir les IA
4. Avoir un système d’audit automatisé Haut Niveau comportant des tests avec des IA
5. Vibe Codé directement avec les parties prenantes (Comité de décision composé de personne représentatives)

Et peut-être pas mal d’autres choses. Mais cela n’est possible que si votre organisme possède un niveau de maturité très élevé en accessibilité. Un niveau dont j’ignore s’il existe quelque part.

Il faudrait très certainement discuter de ces pistes au travers de laboratoires de recherche sur l’accessibilité. Pour en faire profiter toute l’industrie du numérique française.