REGARDEZ MAINTENANT : th-cam.com/video/8LPTY1eVuks/w-d-xo.html Je n’ai bien entendu aucune affiliation avec quelconque framework ! Ça a juste véritablement été une révélation. Et vous, vous aimez aussi ? 👨💻
J'ai vue un tuto css en anglais et le gar utilisait cette méthode j'ai beaucoup aimé mais moi je l'utilise seulement dans certains cas. Perso j'ai pas me retrouver avec pliens de class dans mon html
ça fait maintenant 1 mois et demi que je m'en sers... Moi qui exécrais le CSS du plus profond de mon âme (et sens artistique négatif n'a pas aidé), j'ai également trouvé une révélation en utilisant Tailwind!
Je pense que ce qui dérange certains dans le CSS, vient du fait que ça a toujours été relégué à la marge du développement... "la fameuse phrase : c'est rien, c'est juste du cosmétique". D'ailleurs ce n'est pas un langage de programmation, ce qui a justifié que ce soit un métier en soit : Intégrateur. D'ailleurs, intégrateur depuis les débuts du web, j'ai vu et suivi les évolutions techniques et ai rencontré très peu de développeurs qui aimaient les CSS. "chacun son métier" pouvait-on dire. 🙂 Je me met à Tailwind par obligation, mais je ne cautionne pas. Nous codons des sites web non pour nous-mêmes, mais pour le contenu qu'ils donnent aux utilisateurs. De la donnée, des informations, bref du sens => Sémantique. Comme c'est un sujet qui m'intrigue, et que j'ai pas envie de juste dire que je n'aime pas, je vais essayer d'analyser. La question est : pourquoi Tailwind ? 🤔 Contexte de base posé : cette gêne que tu as ressenti avec le CSS, je la ressens avec Tailwind. Voici quelques points de réflexion : 🔶 Les classes helpers : styles "quasi" inline dans le HTML VS classes sémantiques dans des fichiers CSS. Ce que j'en retiens : le markup devient illisible. Ca le rend plus difficile et plus lent à lire donc à faire évoluer et à maintenir. Difficulté à nommer les choses ? Parfois, et pourtant une card reste une card, qu’elle concerne un film ou un user. Un dropdown reste toujours la même chose, comme un Accordéon, un slider… etc. Alors pourquoi tout jeter ? Il y a ici comme un « jusqu’au-boutisme » qui ne me semble pas raisonnable. Rien n’est jamais absolu : il y a toujours un équilibre à trouver. Si Tailwind a été créé, comme je l’ai entendu de la part d’un fan, en opposition au concept de Bootstrap, c’est donc basé sur une réduction, dès le départ. C'est dommage. Boostrap était trop normé, pas assez configurable, mais les composants étaient une bonne idée. Pourquoi ne pas l'avoir gardée ? Tailwind semble jeter le bébé avec l'eau du bain. A la poubelle le consensus sur « les bonnes pratiques » adoptées par tout le monde, accumulées avec les expériences de tout le monde ? Je voudrais que quelqu'un puisse me convaincre en me disant quel est le bénéfice (en dehors du fait que ça permet à certains d'être plus à l'aise pour faire des styles, sachant que d'autres sont moins à l'aise, donc pas forcément un argument). J'ai entendu dire du même fan, que l'avantage était de ne pas passer d'un fichier HTML à un fichier CSS faisait gagner du temps. Sans doute. Mais le temps qu'on gagne là, on le perd à regarder la doc puisqu'on ne peut pas se souvenir de tout. (au passage : la doc est très bien faite). Voici une analogie pour illustrer cette réflexion : en développement, l’architecture MVC a été créée pour une maintenabilité, une scalabilité et une sécurité « à toute épreuve », en séparant les traitement « Controller » (demandent de la vue avec règles métiers) de ceux « Model » (interaction BDD). Qui irait mélanger les 2 types de traitement juste pour ne pas avoir à passer d’un fichier à l’autre ? Personne. C’est pourtant la même chose. 🔶 Le design system : c’est très bien fait et prêt à l’emploi. Correspond-il au design system des Designers, Directeurs Artistiques qui sont au contact du client ? Pas forcément. Peut-on le modifier ? Oui, on peut le configurer. Tout comme on peut l’écrire et le configurer dans une solution CSS/Sass qui sera tout aussi réutilisable. Conclusion : Tailwind conviendra peut-être plus à un Développeur Freelance qui n’a pas l’âme d’un designer ou une petite entreprise qui n’a pas de Directeur Artistique, ou alors à des entreprises dont les DA travaillent sur la base de Tailwind (je doute 😉). 🔶 La Purge CSS : Ca c’est LE truc génial de Tailwind pour la performance. Mais cela n’a rien à voir avec le fait d’écrire des lignes entières de helpers. Le même procédé pourrait être mis en oeuvre avec un code sémantique. 🔶 @apply : C'est une fonction pour englober les noms de classe Tailwind dans un nom de classe custom pour éviter d’avoir un balisage avec 3 lignes de classes (en gros on fait un raccourci entre le html et le CSS, et dans Tailwind on rallonge le raccourci qu'on venait de prendre 😐). Si vous avez réussi à lire jusqu’ici : merci et félicitation ! 😄 (et aussi désolé : j’aime développer 😉) Si y'a un truc que j'ai oublié, ou que j'ai pas compris : expliquez moi ! :) Ca m'intéresse pour progresser en Tailwind. Si je devais conclure, je dirais : tout dépend du type de projet, du type d’entreprise, du type de clients, ET du type de développeur 😉. Comme toujours, dans l’absolu, il n’y a pas une meilleure solution qu’une autre. Il y a des contextes et des personnes différentes. 🖖 Finalement, personne n’a raison ou n’a tort d’utiliser ou de ne pas utiliser Tailwind : c’est juste une affaire de gens qui aiment et de gens qui n’aiment pas. Comme on dirait : « j’aime pas le chocolat » ou « je préfère la pistache » 😄
Je peux comprendre que le CSS soit pas sexy à faire si on aime pas ça, perso je suis sur React avec une méthode SASS et franchement le SCSS ne me dérange pas du tout, au contraire je n'ai même jamais utilisé de lib css comme Tailwind car je préfère le faire à la main, je trouve cela gratifiant quand une app est élégante et sobre et de se dire C'est moi qui l'ai fait à la mano ! Il en faut pour tous ! Quand t'es freelance et que tu dois respecter une dead line tu auras pas forcément le temps de faire tout le CSS à la main ce qui se comprend, mais quand on a le temps, quel plaisir je trouve d'avoir tout fait à la main et d'avoir ce sentiment de fierté ! :D
En tant que webdesigner je fait partie de la team pure CSS (avec la libraire SASS) J'ai toujours été frustré par le dirigirme des framework. Tailwind me rebute car ça charge énormément le HTML, je suis totalement d'accord avec sa supériorité face à bootstrap. Ça évite l'effet usine à gaz qui est toujours très frustrant en FE. Je construit vraiment mon CSS sur la base de contenu que je design pour être réutilisé. Je fait un travail en amont de l'implémentation pour analyse les besoin du site et je définit ce qui est général jusqu'au détail. Pour les nom de class à force d'en faire on a une structure et une logique qui ce construit, je ne réfléchir qu'au nom des élément unique au projet ou au client. Quand tu décortique bien le projet et que tu définit ta structure tout deviens plus limpide. Le CSS peux devenir extrêmement bordélique. C'est une feuille blanche, tu peux y faire un griboullis ou le plan d'une cathédrale. Tailwind à mon avis est très bon pour des projets modeste et rapide. Le Pure CSS permet une scalabilité et une adaptation que j'aime énormément. Ça prend du temps à définir les contours mais dès que c'est fait je m'éclate vraiment à rendre ce contenu brut cohérent pour les futur utilisateurs 😌 Au final l'important c'est de coder comme on aime, prendre en compte les limitation, le besoin et choisir ce qui correspond le mieux à l'objectif voulu 👍🏾
Tailwind a été un coup de coeur pour moi aussi car ce framework permet de concilier modularité et productivité de manière simple et intuitive ! Il règle les problèmes que j'ai eu avec d'autres méthodes : 1)Le CSS "from scratch" qui est extrement chronophage, redondant, peu stimulant... 2)Bootstrap qui est très rigide et limité, difficile de customisation 3)Le Sass qui me demandait plus de configuration pour l'optimisation et qui était beaucoup plus lent à l'exécution Donc c'est un grand OUI !
Tout à fait en phase avec cette conclusion J’ai tendance à recommander windicss , drop-in replacement de tailwind mais avec des features en plus, et plus performant (c’est eux les inventeurs du just-in-time) Très bonne vidéo !
Ayant toujours détesté bootstrap, je m'étais créé mon propre utility first css, certes un peu limité car non exhaustif mais bien efficace pour des projets perso. Je vais passer sur tailwind grâce a toi ! Très bonne chaîne, même pour un dev confirmé :)
C'est étrange personne n'est au courant qu'il y a un petit bouton plus dans tous les inspecteurs de code navigateur qui permet d'ajouter une feuille de style "utilisateur" et qui s'édite en direct dans le navigateur pour tester son code avant de le coller et enregistrer dans son IDE ? D'autre part il est possible d'éditer les sources css également en live en cliquant sur le nom des fichiers. CSS a été conçu dès sa création pour permettre la surcharge locale par l'utilisateur, et les navigateurs ont donc rapidement proposé l'édition live.
J'avais déjà vu ça plusieurs fois, mais je suis pas trop convaincu par cette approche. Je veux dire, à ce moment là, autant se passer d'écrire des classes et mettre les règles inline, dans l'attribut style. Le problème, c'est qu'on a plus de séparation style/document, et qu'en plus plus moyen de gagner en payload/temps de chargement du document puisque le style est directement intégré à la page (cela dit, suivant le projet ça peut ne pas être important). En revanche, pour construire rapidement un PoC, une démo ou différents layouts, pourquoi pas. Et encore, souvent avec une bonne connaissance de CSS et des selecteurs, y a moyen de designer une app entière avec quelques classes bien placées et bien réutilisées. D'autant que, couplé aux variables, le CSS pure devient particulièrement flexible. On perd aussi en lisibilité dans le code, perso je me sers des classes aussi bien décrire la fonction d'un élément que son état (.alert .warning, .notice .subscription .expired, etc.). Mais le plus gros point noir, selon moi, c'est de se retrouver à contrarier l'un des premier principe de la programmation : DRY (don't repeat yourself), là, pour le coup, avec une approche utility-first, le concept prend l'eau (tadam tsss). Par contre, je suis curieux : comment on implémente correctement un responsive design de cette manière ? Autant avec l'approche classique ça prend assez peu de temps (le plus souvent on override pas plus d'une dizaine de classes par page à différentes échelles), mais quand tout le style se trouve hard-codé que ce soit inline ou dans l'attribut de classe, j'ai du mal à voir comment ça se passe.
1/ l’avantage face à du inline m, c’est que les classes prédéfinies répondent à un design system que tu as défini dans la configuration. Tu n’as donc pas une marge de X ici et une marge de Y par là. Pareil pour les couleurs par exemple. 2/ Tu peux aussi créer tes components, du genre .alert a l’aide de l’approche utility-first css. C’est une fonctionnalité de base si tu le veux. 3/ Le responsif se gère à l’aide de classes par défaut comme flex flex-row md:flex-col. Boum, terminé. Les breaks points sont configurés via la config.
@@ParfaitementWeb Avec les variables CSS tu n'as pas non plus de marge par-ci, par-là, idem pour les couleurs. D'ailleurs, avec la fonction calc en CSS y aussi moyen de définir tout un tas de systèmes de design en ayant à modifier qu'une ou deux variables dans un fichier de config. Depuis que j'utilise intensivement les variables, et certaines fonction (min, max, calc, minmax, entre autre) la vie en CSS est beaucoup plus agréable. 2) Si j'étais taquin, je dirais que ça ressemble fortement à une classe :p 3) ça ça a l'air pas mal. Je vais jeter un petit coup d'oeil. Pour éventuellement accélérer un projet avant de faire un petit nettoyage, ça peut valoir le coup. Après, tout dépend des projets aussi, des objectifs à atteindre, du temps et du budget qu'on à a allouer et surtout de la durée de vie du projet et/ou sa complexité. Je ne nie pas qu'il y a des applications à Tailwind. Comme tout : il faut savoir choisir le bon outil pour la bonne tâche.
Il est claire que de save + rafraîchir la page à chaque fois qu'on modifie son code css est extrêmement chiant 😂 cependant on peut aménager notre éditeur de façon à ce qu'il le fasse tout seul. Si on a l'extension live server sur vsc la page se refresh tte seule et pour ce qui est de la sauvegarde on peut activer l'option auto save et au final on peut écrire notre CSS tranquillement sans se taper les 3/4 du tps à faire ces tâches qui je l'avoue sont à s'en rendre dingue au bout d'1h sur un éditeur lol
Je ne suis pas un grand expert des CSS mais je préfère en général les coder moi-même car les frameworks donnent des surprises : on passe du temps à placer les éléments et dès qu'on insère Bootstrap pour des boutons on a des paddings partout. Tailwind je n'ai pas essayé, c'est comme si on adoptait les CSS perso d'un autre développeur Front. Je ne trouve pas l'approche intéressante. Le vrai problème des Cascadiing Style Sheets c'est qu'il leur manque une notion d'héritage. Le terme Cascading caratérisant seulement un mécanisme de résolution des conflits quand plusieurs styles sont appliquées à un même élément. Exemple, avec Bootstrap, un bouton rouge est matérialisé par la définition class="btn btn-danger". La classe btn applique un style au bouton et le btn-danger vient le mettre en rouge. Il serait plus simple d'avoir un héritage de classes et de se limiter à déclarer class="btn-danger" L'héritage pourrait avoir la forme .btn-danger < btn
Mon vrai problème avec tailwind css est la maintenabilité du code avec tailwind, peut être que je manque une partie de tailwind mais pour moi je ne vois pas en quoi ce framework est scalable. Je pense qu’une vidéo sur la manière dont tailwind est scalable peut être une bonne chose.
Je suis tout à fait d'accord a part l'utility first le fait d'intégrer csspurge pour générer des feuilles de styles clean c'est un gain on performance et productivité qui me gagner énormément de temps de test et débogage.
Je développe depuis pas mal de temps sans projet concret, et en ce moment je commence à m'intéresser au développement web et je suis tombé sur votre chaîne, je trouve le sujet très intéressant 👍
Mmmh... Avis partagé. J'avoue que Tailwind est vachement pratique, cependant, un des défauts c'est de devoir répéter et répéter et encore répéter les mêmes choses pour des éléments qui sont similaires. Alors oui, on peut switcher sur la feuille de style pour des éléments vraiment très redondants, mais du coup pour la maintenance derrière, surtout si c'est quelqu'un d'autre qui doit la faire, ça devient vite galère. D'où mon avis partagé. Mais dans l'ensemble, je préfère de loin les possibilités de Tailwind par rapport au "formatage" de Bootstrap qui limite vraiment la personnalisation ! Il faut voir le projet au final, chacun à ses avantages et inconvénients. Et il faut (surtout) choisir la meilleure méthode qui s'adaptera à chaque projet ! 😉
Enfaite ya 2 deux team et ca se voit bien . Tailwinds est parfait pour moi et bcp d'autre gens qui sont originalement des backends developers et qui ont pas de temps a perdre ou meme certain frontend developer qui veulent un truc fast, rapid ou font du prototyping ou mockup . Et ya les autres , les mec qui eux font du design/du theme/ du frontend development etc mais genre ultra poussé il sont specialise pour eux du coup c'est pas une 'corvé' tout sa , pour nous est une 'perte' de temps lol et eux c'est tu SASS,LESS et j'en passe. Du coup pk tailwinds marche parque ben les gens sont busy je suis fullstack et je dois me taper a longueur de journee: - des Server (Apache/Nginx/IIS/) + SSL + backup et en + connaitre des truc modernes genre K8s/K3s -Sysadmin ( 46 milliars de tool logging etc) - Server Side (PHP, RUBY,GO , RUST,NODE) -API developments -Security some basic - Client Side (HTML, CSS, Javascript,REACT,VUE) - Relational Databases (Postgres, MySQL, MariaDB) - UI and UX Design (ou je suis mauvais mais ya bcp de tools qui aide) - Couplê a du managing skill -Gerer peut etre une equipe -Meeting brainstorming/Proactive , reflechir au probleme au dehors du code. Process etc Vous imaginer bien que tailwinds est populaire parque les gens ont simplement pas le temps..... Le marche veulent d'IT qui savent faire le café , du coup du fait du shopify tu passe sur du blockcahin tu enchaine sur un project finance forecasting Pytorch et a du BI/reporting si c'est pas carrement de l'ERP. Et la je parle juste de projet general je parle meme pas encore de language ou de framework............ J'exagere mais en faite c'est sa .
Personnellement je mélange un peu tout ^^ J'ai des class "générales" qui correspondent à l'utility-first CSS, et je complète avec du CSS classique ! ^^
Je m'instruis beaucoup avec tes vidéos. Merci pour ton travail et bonne continuation 🙂. j'ai une question à te poser. Quel est le minimum qu'un développeur web doit maîtriser pour pouvoir aller sur le marché du travail ? Il y a tellement de langages , de librairies et de frameworks que se dire qu'on va tout maîtriser avant de pouvoir s'intégrer sur le marché du travail serait une aberration. J'attends vivement ta réponse. Merci d'avance 😊
Les classes utilitaires c'est très bien pour les projets orientés composants. Par contre c'est vite le bazar dans le HTML et, si c'est très bien au moment de la création, c'est horrible à maintenir dans le temps. Moi je suis pour une pondération entre classes utilitaires et un framework perso.
salut, moi je viens de sauter le pas et j'ai commence a me former aux bases, html j'aime bien et je suis la logique pour le moment, mais css je n'aime pas du tout, je trouve ca "compliqué" a mon niveau.
-Dès le début de la video je le savais: le css classique n'est pas pr toi, il te fallait absolument un framework comme tailwind... tailwin n'est pas le mal, c'est fait pour faire du design rapide et efficace le css /sass/module.css c'est pour avoir un code maintenable et réutilisable. les deux sont bien, mais pour deux cas bien différents 😀
C'est très intéressant...! Mais à mon sens, on peut vite avoir un code touffu, difficile à lire et à maintenir. Je fais du backend et du front, c'est une obligation pour moi, et j'avoue que je ne suis pas un développeur créatif, néanmoins je trouve que sass et less me permettent d'écrire du css avec aisance.
Pas forcément si on crée des composants la base de code sera clean et facile à maintenir est il existe déjà pas mal de composants. En plus il y a purgeCSS intégrées qui permet de gérer que le CSS utiliser sur le projet un vrai gain en performance et productivité.
La suite logique de l’approche utility est très souvent le découpage du frontend en composants uniques à une seule responsabilité. Comme on le voit dans React par exemple. C’est ainsi que la lisibilité et maintien est possible sur une app de grande échelle.
En vrais faire du tailwind sur un gros projet prend tout son sens car il va optimiser les performances, il va chercher les codes qui se répète etc, et oui avant tailwind, bootstrap avait un goût de pas assez 🤭, et du css pure pour un dev fullstack j’avoue ça fait un peu trop
C'est le mal ? Bof non, le css atomique répond juste à une attente, en occurrence la liberté. Après LiveReload évite de faire Ctrl + R à gogo aussi ^^. Ce qui à tendance à me rendre fou perso avec le css (par moment) ce sont les poids de sélecteur.
C'est ce problème j'ai en ce monde , j'ai vraiment du mal á apprendre Css, en écrivant le code Css ,je perd complétement la patience .Le front end n'est pas fait pour moi .
Ok je vois, dans l'absolu tailwind je trouve ça très bien, mais je me disais que c'était un peu abusif de dire qu'avec tailwind on maitrise CSS, je dirais qu'on maitrise le style, mais le CSS, à priori on en fait plus ^^ En tout cas merci pour la vidéo !
je trouve ca 💩, je trouve que c'est la pire des méthodes, je préfere encore directement coder en style="" et nommer aprés coup pour migrer le style dans le css
Mais c'est la même approche que bootstrap: des classes css écrites dans le html pour modifier le désigne. Pourquoi ne pas le dire clairement? Je comprendrais qu'on puisse dire que bootstrap fait mal son travail. Il faudrait alors argumenter dans ce sens-là, pas juste louer les mérites d'une troisième voie qui n'en est pas une.
REGARDEZ MAINTENANT : th-cam.com/video/8LPTY1eVuks/w-d-xo.html
Je n’ai bien entendu aucune affiliation avec quelconque framework ! Ça a juste véritablement été une révélation. Et vous, vous aimez aussi ? 👨💻
J'ai vue un tuto css en anglais et le gar utilisait cette méthode j'ai beaucoup aimé mais moi je l'utilise seulement dans certains cas. Perso j'ai pas me retrouver avec pliens de class dans mon html
ça fait maintenant 1 mois et demi que je m'en sers... Moi qui exécrais le CSS du plus profond de mon âme (et sens artistique négatif n'a pas aidé), j'ai également trouvé une révélation en utilisant Tailwind!
Je pense que ce qui dérange certains dans le CSS, vient du fait que ça a toujours été relégué à la marge du développement... "la fameuse phrase : c'est rien, c'est juste du cosmétique". D'ailleurs ce n'est pas un langage de programmation, ce qui a justifié que ce soit un métier en soit : Intégrateur. D'ailleurs, intégrateur depuis les débuts du web, j'ai vu et suivi les évolutions techniques et ai rencontré très peu de développeurs qui aimaient les CSS. "chacun son métier" pouvait-on dire. 🙂
Je me met à Tailwind par obligation, mais je ne cautionne pas. Nous codons des sites web non pour nous-mêmes, mais pour le contenu qu'ils donnent aux utilisateurs. De la donnée, des informations, bref du sens => Sémantique. Comme c'est un sujet qui m'intrigue, et que j'ai pas envie de juste dire que je n'aime pas, je vais essayer d'analyser. La question est : pourquoi Tailwind ? 🤔
Contexte de base posé : cette gêne que tu as ressenti avec le CSS, je la ressens avec Tailwind. Voici quelques points de réflexion :
🔶 Les classes helpers : styles "quasi" inline dans le HTML VS classes sémantiques dans des fichiers CSS. Ce que j'en retiens : le markup devient illisible. Ca le rend plus difficile et plus lent à lire donc à faire évoluer et à maintenir.
Difficulté à nommer les choses ? Parfois, et pourtant une card reste une card, qu’elle concerne un film ou un user. Un dropdown reste toujours la même chose, comme un Accordéon, un slider… etc. Alors pourquoi tout jeter ? Il y a ici comme un « jusqu’au-boutisme » qui ne me semble pas raisonnable. Rien n’est jamais absolu : il y a toujours un équilibre à trouver. Si Tailwind a été créé, comme je l’ai entendu de la part d’un fan, en opposition au concept de Bootstrap, c’est donc basé sur une réduction, dès le départ. C'est dommage. Boostrap était trop normé, pas assez configurable, mais les composants étaient une bonne idée. Pourquoi ne pas l'avoir gardée ? Tailwind semble jeter le bébé avec l'eau du bain. A la poubelle le consensus sur « les bonnes pratiques » adoptées par tout le monde, accumulées avec les expériences de tout le monde ? Je voudrais que quelqu'un puisse me convaincre en me disant quel est le bénéfice (en dehors du fait que ça permet à certains d'être plus à l'aise pour faire des styles, sachant que d'autres sont moins à l'aise, donc pas forcément un argument).
J'ai entendu dire du même fan, que l'avantage était de ne pas passer d'un fichier HTML à un fichier CSS faisait gagner du temps. Sans doute. Mais le temps qu'on gagne là, on le perd à regarder la doc puisqu'on ne peut pas se souvenir de tout. (au passage : la doc est très bien faite).
Voici une analogie pour illustrer cette réflexion : en développement, l’architecture MVC a été créée pour une maintenabilité, une scalabilité et une sécurité « à toute épreuve », en séparant les traitement « Controller » (demandent de la vue avec règles métiers) de ceux « Model » (interaction BDD). Qui irait mélanger les 2 types de traitement juste pour ne pas avoir à passer d’un fichier à l’autre ? Personne. C’est pourtant la même chose.
🔶 Le design system : c’est très bien fait et prêt à l’emploi. Correspond-il au design system des Designers, Directeurs Artistiques qui sont au contact du client ? Pas forcément. Peut-on le modifier ? Oui, on peut le configurer. Tout comme on peut l’écrire et le configurer dans une solution CSS/Sass qui sera tout aussi réutilisable. Conclusion : Tailwind conviendra peut-être plus à un Développeur Freelance qui n’a pas l’âme d’un designer ou une petite entreprise qui n’a pas de Directeur Artistique, ou alors à des entreprises dont les DA travaillent sur la base de Tailwind (je doute 😉).
🔶 La Purge CSS : Ca c’est LE truc génial de Tailwind pour la performance. Mais cela n’a rien à voir avec le fait d’écrire des lignes entières de helpers. Le même procédé pourrait être mis en oeuvre avec un code sémantique.
🔶 @apply : C'est une fonction pour englober les noms de classe Tailwind dans un nom de classe custom pour éviter d’avoir un balisage avec 3 lignes de classes (en gros on fait un raccourci entre le html et le CSS, et dans Tailwind on rallonge le raccourci qu'on venait de prendre 😐).
Si vous avez réussi à lire jusqu’ici : merci et félicitation ! 😄 (et aussi désolé : j’aime développer 😉)
Si y'a un truc que j'ai oublié, ou que j'ai pas compris : expliquez moi ! :) Ca m'intéresse pour progresser en Tailwind.
Si je devais conclure, je dirais : tout dépend du type de projet, du type d’entreprise, du type de clients, ET du type de développeur 😉.
Comme toujours, dans l’absolu, il n’y a pas une meilleure solution qu’une autre. Il y a des contextes et des personnes différentes. 🖖
Finalement, personne n’a raison ou n’a tort d’utiliser ou de ne pas utiliser Tailwind : c’est juste une affaire de gens qui aiment et de gens qui n’aiment pas. Comme on dirait : « j’aime pas le chocolat » ou « je préfère la pistache » 😄
Je peux comprendre que le CSS soit pas sexy à faire si on aime pas ça, perso je suis sur React avec une méthode SASS et franchement le SCSS ne me dérange pas du tout, au contraire je n'ai même jamais utilisé de lib css comme Tailwind car je préfère le faire à la main, je trouve cela gratifiant quand une app est élégante et sobre et de se dire C'est moi qui l'ai fait à la mano !
Il en faut pour tous ! Quand t'es freelance et que tu dois respecter une dead line tu auras pas forcément le temps de faire tout le CSS à la main ce qui se comprend, mais quand on a le temps, quel plaisir je trouve d'avoir tout fait à la main et d'avoir ce sentiment de fierté ! :D
En tant que webdesigner je fait partie de la team pure CSS (avec la libraire SASS)
J'ai toujours été frustré par le dirigirme des framework.
Tailwind me rebute car ça charge énormément le HTML, je suis totalement d'accord avec sa supériorité face à bootstrap. Ça évite l'effet usine à gaz qui est toujours très frustrant en FE.
Je construit vraiment mon CSS sur la base de contenu que je design pour être réutilisé.
Je fait un travail en amont de l'implémentation pour analyse les besoin du site et je définit ce qui est général jusqu'au détail.
Pour les nom de class à force d'en faire on a une structure et une logique qui ce construit, je ne réfléchir qu'au nom des élément unique au projet ou au client.
Quand tu décortique bien le projet et que tu définit ta structure tout deviens plus limpide.
Le CSS peux devenir extrêmement bordélique. C'est une feuille blanche, tu peux y faire un griboullis ou le plan d'une cathédrale.
Tailwind à mon avis est très bon pour des projets modeste et rapide. Le Pure CSS permet une scalabilité et une adaptation que j'aime énormément.
Ça prend du temps à définir les contours mais dès que c'est fait je m'éclate vraiment à rendre ce contenu brut cohérent pour les futur utilisateurs 😌
Au final l'important c'est de coder comme on aime, prendre en compte les limitation, le besoin et choisir ce qui correspond le mieux à l'objectif voulu 👍🏾
Tailwind a été un coup de coeur pour moi aussi car ce framework permet de concilier modularité et productivité de manière simple et intuitive !
Il règle les problèmes que j'ai eu avec d'autres méthodes :
1)Le CSS "from scratch" qui est extrement chronophage, redondant, peu stimulant...
2)Bootstrap qui est très rigide et limité, difficile de customisation
3)Le Sass qui me demandait plus de configuration pour l'optimisation et qui était beaucoup plus lent à l'exécution
Donc c'est un grand OUI !
Tout à fait en phase avec cette conclusion
J’ai tendance à recommander windicss , drop-in replacement de tailwind mais avec des features en plus, et plus performant (c’est eux les inventeurs du just-in-time)
Très bonne vidéo !
Ayant toujours détesté bootstrap, je m'étais créé mon propre utility first css, certes un peu limité car non exhaustif mais bien efficace pour des projets perso. Je vais passer sur tailwind grâce a toi !
Très bonne chaîne, même pour un dev confirmé :)
C'est étrange personne n'est au courant qu'il y a un petit bouton plus dans tous les inspecteurs de code navigateur qui permet d'ajouter une feuille de style "utilisateur" et qui s'édite en direct dans le navigateur pour tester son code avant de le coller et enregistrer dans son IDE ? D'autre part il est possible d'éditer les sources css également en live en cliquant sur le nom des fichiers. CSS a été conçu dès sa création pour permettre la surcharge locale par l'utilisateur, et les navigateurs ont donc rapidement proposé l'édition live.
J'avais déjà vu ça plusieurs fois, mais je suis pas trop convaincu par cette approche. Je veux dire, à ce moment là, autant se passer d'écrire des classes et mettre les règles inline, dans l'attribut style.
Le problème, c'est qu'on a plus de séparation style/document, et qu'en plus plus moyen de gagner en payload/temps de chargement du document puisque le style est directement intégré à la page (cela dit, suivant le projet ça peut ne pas être important).
En revanche, pour construire rapidement un PoC, une démo ou différents layouts, pourquoi pas. Et encore, souvent avec une bonne connaissance de CSS et des selecteurs, y a moyen de designer une app entière avec quelques classes bien placées et bien réutilisées. D'autant que, couplé aux variables, le CSS pure devient particulièrement flexible. On perd aussi en lisibilité dans le code, perso je me sers des classes aussi bien décrire la fonction d'un élément que son état (.alert .warning, .notice .subscription .expired, etc.). Mais le plus gros point noir, selon moi, c'est de se retrouver à contrarier l'un des premier principe de la programmation : DRY (don't repeat yourself), là, pour le coup, avec une approche utility-first, le concept prend l'eau (tadam tsss).
Par contre, je suis curieux : comment on implémente correctement un responsive design de cette manière ? Autant avec l'approche classique ça prend assez peu de temps (le plus souvent on override pas plus d'une dizaine de classes par page à différentes échelles), mais quand tout le style se trouve hard-codé que ce soit inline ou dans l'attribut de classe, j'ai du mal à voir comment ça se passe.
1/ l’avantage face à du inline m, c’est que les classes prédéfinies répondent à un design system que tu as défini dans la configuration. Tu n’as donc pas une marge de X ici et une marge de Y par là. Pareil pour les couleurs par exemple.
2/ Tu peux aussi créer tes components, du genre .alert a l’aide de l’approche utility-first css. C’est une fonctionnalité de base si tu le veux.
3/ Le responsif se gère à l’aide de classes par défaut comme flex flex-row md:flex-col. Boum, terminé. Les breaks points sont configurés via la config.
@@ParfaitementWeb Avec les variables CSS tu n'as pas non plus de marge par-ci, par-là, idem pour les couleurs. D'ailleurs, avec la fonction calc en CSS y aussi moyen de définir tout un tas de systèmes de design en ayant à modifier qu'une ou deux variables dans un fichier de config.
Depuis que j'utilise intensivement les variables, et certaines fonction (min, max, calc, minmax, entre autre) la vie en CSS est beaucoup plus agréable.
2) Si j'étais taquin, je dirais que ça ressemble fortement à une classe :p
3) ça ça a l'air pas mal. Je vais jeter un petit coup d'oeil. Pour éventuellement accélérer un projet avant de faire un petit nettoyage, ça peut valoir le coup.
Après, tout dépend des projets aussi, des objectifs à atteindre, du temps et du budget qu'on à a allouer et surtout de la durée de vie du projet et/ou sa complexité. Je ne nie pas qu'il y a des applications à Tailwind. Comme tout : il faut savoir choisir le bon outil pour la bonne tâche.
Tailwind est tout simplement magnifique 😎
Il est claire que de save + rafraîchir la page à chaque fois qu'on modifie son code css est extrêmement chiant 😂 cependant on peut aménager notre éditeur de façon à ce qu'il le fasse tout seul. Si on a l'extension live server sur vsc la page se refresh tte seule et pour ce qui est de la sauvegarde on peut activer l'option auto save et au final on peut écrire notre CSS tranquillement sans se taper les 3/4 du tps à faire ces tâches qui je l'avoue sont à s'en rendre dingue au bout d'1h sur un éditeur lol
Une vidéo sur tailwind css ce serait cool
Go tester ça !
Je ne suis pas un grand expert des CSS mais je préfère en général les coder moi-même car les frameworks donnent des surprises : on passe du temps à placer les éléments et dès qu'on insère Bootstrap pour des boutons on a des paddings partout.
Tailwind je n'ai pas essayé, c'est comme si on adoptait les CSS perso d'un autre développeur Front. Je ne trouve pas l'approche intéressante.
Le vrai problème des Cascadiing Style Sheets c'est qu'il leur manque une notion d'héritage. Le terme Cascading caratérisant seulement un mécanisme de résolution des conflits quand plusieurs styles sont appliquées à un même élément.
Exemple, avec Bootstrap, un bouton rouge est matérialisé par la définition class="btn btn-danger". La classe btn applique un style au bouton et le btn-danger vient le mettre en rouge. Il serait plus simple d'avoir un héritage de classes et de se limiter à déclarer class="btn-danger"
L'héritage pourrait avoir la forme .btn-danger < btn
Mon vrai problème avec tailwind css est la maintenabilité du code avec tailwind, peut être que je manque une partie de tailwind mais pour moi je ne vois pas en quoi ce framework est scalable. Je pense qu’une vidéo sur la manière dont tailwind est scalable peut être une bonne chose.
Je suis tout à fait d'accord a part l'utility first le fait d'intégrer csspurge pour générer des feuilles de styles clean c'est un gain on performance et productivité qui me gagner énormément de temps de test et débogage.
Team Tailwind ❤️ exactement le même constat que toi !
Je développe depuis pas mal de temps sans projet concret, et en ce moment je commence à m'intéresser au développement web et je suis tombé sur votre chaîne, je trouve le sujet très intéressant 👍
j'adore ton contenu, continue comme ça !
Mmmh... Avis partagé. J'avoue que Tailwind est vachement pratique, cependant, un des défauts c'est de devoir répéter et répéter et encore répéter les mêmes choses pour des éléments qui sont similaires.
Alors oui, on peut switcher sur la feuille de style pour des éléments vraiment très redondants, mais du coup pour la maintenance derrière, surtout si c'est quelqu'un d'autre qui doit la faire, ça devient vite galère. D'où mon avis partagé. Mais dans l'ensemble, je préfère de loin les possibilités de Tailwind par rapport au "formatage" de Bootstrap qui limite vraiment la personnalisation !
Il faut voir le projet au final, chacun à ses avantages et inconvénients. Et il faut (surtout) choisir la meilleure méthode qui s'adaptera à chaque projet ! 😉
Merci pour vos conseils.
Enfaite ya 2 deux team et ca se voit bien . Tailwinds est parfait pour moi et bcp d'autre gens qui sont originalement des backends developers et qui ont pas de temps a perdre ou meme certain frontend developer qui veulent un truc fast, rapid ou font du prototyping ou mockup .
Et ya les autres , les mec qui eux font du design/du theme/ du frontend development etc mais genre ultra poussé il sont specialise pour eux du coup c'est pas une 'corvé' tout sa , pour nous est une 'perte' de temps lol et eux c'est tu SASS,LESS et j'en passe.
Du coup pk tailwinds marche parque ben les gens sont busy je suis fullstack et je dois me taper a longueur de journee:
- des Server (Apache/Nginx/IIS/) + SSL + backup et en + connaitre des truc modernes genre K8s/K3s
-Sysadmin ( 46 milliars de tool logging etc)
- Server Side (PHP, RUBY,GO , RUST,NODE)
-API developments
-Security some basic
- Client Side (HTML, CSS, Javascript,REACT,VUE)
- Relational Databases (Postgres, MySQL, MariaDB)
- UI and UX Design (ou je suis mauvais mais ya bcp de tools qui aide)
- Couplê a du managing skill
-Gerer peut etre une equipe
-Meeting brainstorming/Proactive , reflechir au probleme au dehors du code. Process etc
Vous imaginer bien que tailwinds est populaire parque les gens ont simplement pas le temps.....
Le marche veulent d'IT qui savent faire le café , du coup du fait du shopify tu passe sur du blockcahin tu enchaine sur un project finance forecasting Pytorch et a du BI/reporting si c'est pas carrement de l'ERP.
Et la je parle juste de projet general je parle meme pas encore de language ou de framework............
J'exagere mais en faite c'est sa .
Je ressens précisément ce que tu décris, gros travail d'introspection et de traduction 👏
Personnellement je mélange un peu tout ^^ J'ai des class "générales" qui correspondent à l'utility-first CSS, et je complète avec du CSS classique ! ^^
Je n’ai qu’une chose à dire : +1 😉
Le temps nécessaire pour la compilation ? 🤔
j'adore cette video lol ces moi tout craché 😅
Je m'instruis beaucoup avec tes vidéos. Merci pour ton travail et bonne continuation 🙂. j'ai une question à te poser. Quel est le minimum qu'un développeur web doit maîtriser pour pouvoir aller sur le marché du travail ? Il y a tellement de langages , de librairies et de frameworks que se dire qu'on va tout maîtriser avant de pouvoir s'intégrer sur le marché du travail serait une aberration. J'attends vivement ta réponse. Merci d'avance 😊
Les classes utilitaires c'est très bien pour les projets orientés composants. Par contre c'est vite le bazar dans le HTML et, si c'est très bien au moment de la création, c'est horrible à maintenir dans le temps. Moi je suis pour une pondération entre classes utilitaires et un framework perso.
Moi j'adore Tailwind CSS !
C'est Hyper Fast
salut, moi je viens de sauter le pas et j'ai commence a me former aux bases, html j'aime bien et je suis la logique pour le moment, mais css je n'aime pas du tout, je trouve ca "compliqué" a mon niveau.
T’es obligé de maitriser au moins les bases du css après tu peux utiliser un framework comme bootstrap ou tailwind css
Sorry!!! la machine juste devant l'écran c'est quoi?
Rodecaster Pro
-Dès le début de la video je le savais: le css classique n'est pas pr toi, il te fallait absolument un framework comme tailwind...
tailwin n'est pas le mal, c'est fait pour faire du design rapide et efficace
le css /sass/module.css c'est pour avoir un code maintenable et réutilisable. les deux sont bien, mais pour deux cas bien différents 😀
C'est très intéressant...!
Mais à mon sens, on peut vite avoir un code touffu, difficile à lire et à maintenir. Je fais du backend et du front, c'est une obligation pour moi, et j'avoue que je ne suis pas un développeur créatif, néanmoins je trouve que sass et less me permettent d'écrire du css avec aisance.
Pas forcément si on crée des composants la base de code sera clean et facile à maintenir est il existe déjà pas mal de composants.
En plus il y a purgeCSS intégrées qui permet de gérer que le CSS utiliser sur le projet un vrai gain en performance et productivité.
La suite logique de l’approche utility est très souvent le découpage du frontend en composants uniques à une seule responsabilité. Comme on le voit dans React par exemple. C’est ainsi que la lisibilité et maintien est possible sur une app de grande échelle.
@@SaifBrahim d'accord c'est noté.
Merci.
@@ParfaitementWeb très bien.
Merci.
Tailwindcss est trés bon et permet de développer plus facilement, tu peut faire un tuto la déssus ?
Une suite, c'est obligé
Bonjour moi de même je ne suis pas a l'aise avec le css
Bonne video
En vrais faire du tailwind sur un gros projet prend tout son sens car il va optimiser les performances, il va chercher les codes qui se répète etc, et oui avant tailwind, bootstrap avait un goût de pas assez 🤭, et du css pure pour un dev fullstack j’avoue ça fait un peu trop
Dommage que tu rentres pas ds les détails, j'ai pas bien compris ta façon de faire au final
A 1:50 je ne suis pas trop d'accord le CSS simple ne compile pas, tu a du confondre avec le scss qui lui compile 🙂
Oui évidemment, je généralise avec le « CSS » qu’on passe par un pre-processeur 99% du temps.
C'est le mal ? Bof non, le css atomique répond juste à une attente, en occurrence la liberté. Après LiveReload évite de faire Ctrl + R à gogo aussi ^^. Ce qui à tendance à me rendre fou perso avec le css (par moment) ce sont les poids de sélecteur.
C'est ce problème j'ai en ce monde , j'ai vraiment du mal á apprendre Css, en écrivant le code Css ,je perd complétement la patience .Le front end n'est pas fait pour moi .
Juste à 1:33, tout est vrai
Donc tu as enfin commencé à maîtriser le CSS et arrêter de te reposer sur des librairies, en utilisant tailwind ?
Ya un truc que je pige pas 🤔
Des libraries d’UI kits comme Bootstrap :)
Ok je vois, dans l'absolu tailwind je trouve ça très bien, mais je me disais que c'était un peu abusif de dire qu'avec tailwind on maitrise CSS, je dirais qu'on maitrise le style, mais le CSS, à priori on en fait plus ^^
En tout cas merci pour la vidéo !
Moi même j ai une frustration dans le css inexplicable tjr la.
Moi aussi j’ai ce problème.
Sauf que c'est horrible pour les autres.. on y comprend rien sa surchage le html ..
je trouve ca 💩, je trouve que c'est la pire des méthodes, je préfere encore directement coder en style="" et nommer aprés coup pour migrer le style dans le css
Mais c'est la même approche que bootstrap: des classes css écrites dans le html pour modifier le désigne. Pourquoi ne pas le dire clairement? Je comprendrais qu'on puisse dire que bootstrap fait mal son travail. Il faudrait alors argumenter dans ce sens-là, pas juste louer les mérites d'une troisième voie qui n'en est pas une.
Cette façon de coupler la structure et le style dans les fichiers html, c'est clairement le mal. Tailwind c'est le mal
tailwindcss n'est pas accessible à tous comme bons nombres voudraient nous le faire croire surtout pour débuguer
...
🤣🤣🤣🤣sa suffi
le CSS c'est sans Sass :p
J'ai crue j'étais le seul a ne pas aimer le CSS. quand je commence un projet je pense direct a bootstrap