Tailwind CSS présente des limites

Présentation de Tailwind CSS

Tailwind CSS est un framework CSS très populaire parmi les développeurs web. Il résout le problème de la standardisation des espaces, des couleurs et des tailles sans nécessiter de connaissances préalables en design graphique. De plus, il impose une méthodologie de travail basée sur la construction de grandes structures à partir de simples utilités.

Malgré ses avantages, Tailwind CSS présente certaines limites. Il faut apprendre des dizaines de classes, ce qui peut être fastidieux, même avec une bonne documentation et l'aide de l'auto-complétion de l'éditeur.

Limites techniques de Tailwind CSS

Tailwind CSS brise la séparation entre la structure et la conception, car il utilise des classes utilitaires qui doivent être inclues dans le HTML. Cela rend le code moins lisible et moins réutilisable. Bien que le créateur de Tailwind, Adam Wathan, argue que la séparation des préoccupations change de direction avec les utilités, cette approche peut ne pas être appropriée pour tous les projets, en particulier ceux qui utilisent des templates et du CSS classique.

De plus, les noms des classes de Tailwind ne sont pas toujours cohérents, ce qui peut entraîner des confusions. Par exemple, les classes d'alignement comme items-center, justify-center, text-center et place-content-center ont des noms qui ne suivent pas un modèle clair.

Implications et limites de l'utilisation de Tailwind CSS

L'utilisation de Tailwind CSS peut également limiter l'apprentissage du CSS, car les développeurs peuvent se reposer sur les classes prédéfinies au lieu d'apprendre les fondamentaux du CSS. De plus, le code généré par Tailwind peut être difficile à lire et à maintenir, en particulier lorsqu'il est utilisé avec des classes utilitaires.

Enfin, il est important de noter que Tailwind CSS n'est pas une solution universelle et qu'il convient de l'évaluer en fonction des besoins spécifiques de chaque projet. Les développeurs doivent prendre en compte les limites et les avantages de Tailwind CSS avant de décider de l'utiliser dans leur projet.

Exemple de code

Voici un exemple de code qui montre la différence entre le CSS classique et Tailwind CSS :

:root {
   --color-white: #fff;
   --color-black: #000;
   --color-indigo: #4f46e5;
   --color-indigo-hover: #4338ca;
   --gap-s: 0.5rem;
   --gap-m: 1rem;
}
.button {
    padding: var(--gap-s) var(--gap-m);
    background-color: var(--color-indigo);
    color: var(--color-white);
    font-weight: 700;
    border-radius: var(--gap-s);
    &:hover, &:focus {
        background-color: var(--color-indigo-hover);
    }
}

Et voici l'équivalent en Tailwind CSS :

.button {
    @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700;
}