Vent arrière ? Je vais passer

Récemment, j'ai utilisé Tailwindcss dans un projet et vous savez quoi ? Ce fut une expérience révélatrice, c'est le moins qu'on puisse dire.

Certains d'entre vous se demandent peut-être : qu'est-ce que Tailwindcss ?

Tailwind CSS se distingue comme la bibliothèque CSS à la croissance la plus rapide à ce jour. Il est rapidement devenu un outil essentiel pour les développeurs front-end. De nombreux développeurs front-end l'utilisent dans des projets à grande échelle, rencontrant des problèmes minimes. Ses améliorations apportées au développement et à la conception de sites Web et d'applications Web sont indéniablement remarquables.

Donc quel est le problème? Pourquoi le titre dit-il "" Tailwindcss ? Non merci ”?

Ce titre suggère qu'il pourrait y avoir des cas où Tailwind CSS pourrait ne pas être le choix optimal pour vos projets, malgré son excellence. Pourquoi cela pourrait-il être? Il y a une réponse. Pourtant, avant de nous plonger dans l'explication, établissons les bases de cet examen de la technologie.

Qu'est-ce qui se passe avec tous les CSS ?

Avant de pouvoir entrer dans Tailwindcss et ses subtilités de développement, nous devons satisfaire quelques prérequis.

Qu'est-ce que CSS ?

CSS signifie feuilles de style en cascade. La meilleure définition pour CSS à mon avis vient de techterms.com

«CSS est un langage de feuille de style utilisé pour formater le contenu des pages Web HTML. Les feuilles de style CSS peuvent définir l'apparence et la mise en forme du texte, des tableaux et d'autres éléments séparément du contenu lui-même. Les styles peuvent être trouvés dans le fichier HTML d'une page Web ou dans un document séparé référencé par plusieurs pages Web ».

En peu de mots : CSS est le langage de style. Vous utilisez CSS sur des éléments HTML pour rendre votre page Web ou votre application Web excellente.

Qu'est-ce que Tailwindcss ?

D'après les mots de l' équipe Tailwindcss elle-même, Tailwindcss est " Un framework CSS utilitaire d'abord rempli de classes comme flex , pt-4 , text-center et rotate-90 qui peuvent être composées pour construire n'importe quelle conception, directement dans votre balisage ".

Cela signifie essentiellement que CSS Tailwind prend les procédures et opérations CSS originales, puis les rend plus simples à faire et à mettre en œuvre.

Nous avons déjà abordé les bases du CSS et du CSS Tailwind. Maintenant, approfondissons et examinons comment Tailwind CSS fonctionne en pratique, ainsi que ses homologues CSS correspondants. Cette exploration nous mènera éventuellement à la conclusion à laquelle j'ai abouti lors de mon projet impliquant Tailwind CSS.

Ma conclusion est que Tailwind CSS est le mieux adapté aux projets frontaux plus grands et plus complexes. Cependant, le choix par défaut pour la plupart des situations devrait toujours être le CSS "vanille". En d'autres termes, l'utilisation de CSS dans sa forme la plus pure est généralement plus avantageuse pour la plupart des individus et des scénarios par rapport à toute bibliothèque supplémentaire, que ce soit Tailwind CSS ou autres.

Différences entre CSS et Tailwindcss

À quoi ressemble Tailwindcss ? Comparons en faisant un équivalent CSS vanilla puis un équivalent Tailwindcss.

Décomposons ce qui se passe dans le texte ci-dessus. C'est un extrait HTML 5 et nous construisons un bouton.

Pour construire le bouton, nous le configurons via des " divs " - essentiellement de petits conteneurs pour saisir des éléments permettant de modifier notre site Web ou notre application Web. Nous donnons à chaque div sa propre " classe " afin que nous puissions référencer cet élément particulier plus tard dans notre fichier CSS séparé. Cependant, vous pouvez également donner aux divs leurs propres " identifiants ". Vous pouvez effectuer des modifications CSS " en ligne ", ce qui signifie que vous pouvez mettre du CSS directement dans le fichier HTML, mais la plupart ont tendance à éviter cela pour des raisons d'organisation.

Dans le fichier CSS, à quoi pourrait ressembler notre code pour modifier le bouton ?

Dans le code ci-dessus, nous interagissons avec la classe de bouton dans l'extrait HTML. La façon dont vous rendez votre fichier CSS conscient de vos classes HTML est avec un point au début du nom de la classe elle-même. En dessous, dans l'ordre, nous alignons le bouton au centre de la div avec « align-items ». Sous align-item se trouve le " clip d'arrière-plan " qui définit jusqu'où la " couleur d'arrière-plan " s'étendra et ne s'étendra pas. La « bordure » est l'épaisseur des côtés du bouton et le rayon de la bordure est la courbure des bords. Tout ce que nous venons d'évoquer contribue à développer le style des boutons. Comme nous pouvons le voir, les styles CSS d'origine semblent assez simples. Comment Tailwindcss gérerait-il le même cas ?

Attends quoi? Avons-nous juste mis du code d'aspect CSS dans un fichier HTML ? Oui. Ce que vous regardez est l'équivalent des exemples de code précédents dans Tailwindcss. C'est en fait l'un des attributs les plus uniques de Tailwindcss. Lorsque vous utilisez Tailwindcss, vous ne mettez pas votre code CSS séparé dans un fichier différent. Tout votre code Tailwindcss va directement dans votre fichier HTML. Comme nous l'avons indiqué précédemment, les développeurs évitent traditionnellement le codage CSS en ligne . Avec Tailwindcss, le codage en ligne n'est plus vraiment une option, il est presque nécessaire. Le Tailwindcss est entièrement implémenté via l' identification de classe .

Maintenant, que fait le code ci-dessus ? il fait exactement ce que fait le code CSS d'origine, quoique légèrement différemment.

Jetons un autre regard sur le CSS standard par rapport à son homologue Tailwindcss.

Dans l'image ci-dessus, nous sommes dans un document HTML5 important une image de chocolat sous la classe « card-img ». Voyons à quoi ressemble le CSS correspondant.

Le code CSS ci-dessus est similaire au dernier. Pas besoin d'extrapolation très poussée. Nous définissons l'apparence des cartes en chocolat. Voyons maintenant la variante beaucoup plus intéressante de Tailwindcss.

Le code ci-dessus est l'équivalent de Tailwindcss. C'est beaucoup plus simple, et plus élégant mais demande beaucoup plus d'efforts pour savoir ce que tout signifie et comment positionner les énoncés. Est-ce donc un avantage par rapport au CSS traditionnel ?

La nature de Tailwindcss le rend très désordonné. Tout votre code, à la fois HTML et CSS, sera dans un seul fichier et sera long et apparemment encombré. Cela rend difficile son développement.

Quels sont les principaux inconvénients de Tailwindcss ?

• Courbe d'apprentissage abrupte qui prend du temps pour s'y habituer.
• Vous devez créer des composants de classe personnalisés. (Cela pourrait représenter beaucoup sur un long projet).
• Déroutant car HTML et style sont mélangés

Quels sont ses principaux avantages ?

• Hautement personnalisable

• Développement plus rapide

• Formulation et modèles cohérents, quels que soient les éléments ajoutés ou modifiés.

  
  

Nous avons vu des exemples de Tailwindcss et nous connaissons maintenant les principaux avantages et inconvénients. Mais, à quel point est-il populaire ?

Il a été adopté et proliféré parmi les anciens et les nouveaux développeurs.

Vivian Guillen de tailwindweekly.com a déclaré que Tailwindcss avait gagné 4,5 millions de téléchargements hebdomadaires au 19 novembre 2022. Au moment où j'écris ceci, si vous allez sur npmjs.com et recherchez Tailwindcss, il a 336 millions de téléchargements. Depuis sa sortie il y a 5 ans, c'est une moyenne de 184 110 téléchargements par jour. Une quantité incroyable de téléchargements.

Se détendre sur Tailwind

Plus tôt, au début de cet article, j'ai écrit : « Il peut y avoir un ou des moments où Tailwindcss n'est pas la solution optimale pour vos projets ». Pourquoi ai-je écrit cela ? et comment est-il en corrélation avec le titre? "Vent arrière ? Je vais passer ".

Tailwindcss est populaire dans le monde entier parmi presque tous les développeurs frontaux, il semble plus facile à mettre en œuvre que le CSS traditionnel et il offre plus de personnalisation que les autres technologies de ce type. Heck, mon utilisation de celui-ci a même inspiré cet article lui-même. Alors pourquoi est-ce que j'en doute encore ? Parce que je l'ai utilisé bien sûr .

Tailwindcss est tout aussi bon que tout le monde le prétend et plus encore. De même, c'est tout aussi mauvais que les gens le prétendent. La nature de Tailwindcss le rend alambiqué pour travailler avec des projets à court et à moyen terme, la courbe d'apprentissage entrave complètement votre développement, l'insistance à créer des composants personnalisés, etc. Tout cela rend Tailwindcss insupportable, À COURT TERME . Seulement à court terme !

Cela signifie que Tailwind CSS doit être réservé aux projets étendus et complexes entrepris par les développeurs et les entreprises. Pour les projets plus courts, il est conseillé d'adhérer au CSS conventionnel. Cela empêche vos compétences CSS de s'affaiblir et évite de devenir trop dépendant des cadres de raccourcis comme Tailwind CSS. Pourquoi devriez-vous me croire ? Je me suis mis au défi d'employer Tailwind CSS sur un projet mineur, et cela a vraiment souligné pourquoi il est mieux adapté aux projets substantiels et durables. Je suis ravi de me plonger dans d'autres frameworks CSS et je pourrais même rédiger des articles à leur sujet !

Vous pouvez le savoir si vous vous abonnez à moi et nous nous reverrons très bientôt ;)