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 à 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. CSS 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 et ses subtilités de développement, nous devons satisfaire quelques prérequis. Tailwindcss 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 pour rendre votre page Web ou votre application Web excellente. HTML Qu'est-ce que Tailwindcss ? D'après les mots de l' elle-même, Tailwindcss est " ". équipe Tailwindcss 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 Comparons en faisant un équivalent CSS vanilla puis un équivalent Tailwindcss. À quoi ressemble Tailwindcss ? Décomposons ce qui se passe dans le texte ci-dessus. C'est un extrait et nous construisons un bouton. HTML 5 Pour construire le bouton, nous le configurons via des " " - 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 " " 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 " ". Vous pouvez effectuer des modifications CSS " ", 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. divs classe identifiants en ligne 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 « ». Sous align-item se trouve le " " qui définit jusqu'où la " " s'étendra et ne s'étendra pas. La « » 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 ? align-items clip d'arrière-plan couleur d'arrière-plan bordure 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 . 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 . en ligne 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 important une image de chocolat sous la classe « ». Voyons à quoi ressemble le CSS correspondant. HTML5 card-img 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. 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 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. Vivian Guillen de tailwindweekly.com npmjs.com Se détendre sur Tailwind Plus tôt, au début de cet article, j'ai écrit : « Pourquoi ai-je écrit cela ? et comment est-il en corrélation avec le titre? Il peut y avoir un ou des moments où Tailwindcss n'est pas la solution optimale pour vos projets ». "Vent arrière ? Je vais passer ". 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 ? . Tailwindcss 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, . Seulement à court terme ! À 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 et nous nous reverrons très bientôt ;) abonnez à moi
