Pareil je vois vraiment pas la différence entre utiliser du Tailwind sur des classes HTML on utiliser l'attribut Style des tags HTML ? On nous hurle dessus de ne jamais utiliser l'attribut style mais pour les classes c'est ok, alors que sa présente exactement les mêmes défauts.
J'ai jamais test Tailwind, mais c'est bien de préciser que c'est un design system avant tout. En dehors de ça j'ai l'impression que c'est plus handicapant de l'utiliser qu'autre chose (CSS dans le html, duplication de classes inutiles, illisibilité, j'imagine que les sélecteurs sont très limités, pas d'accès à toutes les classes natives CSS, baisse de compétence en CSS, inconsistant car tu retrouve à avoir du style inline et des fois dans un fichier externe ...). Personnellement j'ai adopté Styled Components, avec un peu de réticence au début, mais j'en suis plus que ravi, surtout avec la possibilité de garder un code propre et structuré, injecter du JS et récupération des props nativement, l'injection de style et la possiblité de réutiliser en chaine chaque composant. Et surtout pouvoir écrire du vrai CSS 😁, y a Emmet qui existe pour aller plus vite, donc pour moi c'est pas vraiment un argument non plus pour TW
J'avais la même opinion que toi sur Tailwind, mais aujourd'hui je ne peux m'en passer, comme le dit Melvyn, il me propose des tailles, des couleurs, qui sont bien pensées, si je choisi moi c'est le bordel.
Oui mais styled-component et le cssinjs en général est de loins le moyen le moins optimiser de faire du css dans une application. Pour un dashboard ok mais une app je sais pas
Tailwind le bonheur, c'est comme un Mac, quand tu n'as jamais essayé, c'est de la merde de dehors, tu critiques tellement facilement, puis un jour tu essayes et tu adoptes ! Je suis développeur back-end et quand je passe sur le front, tailwind me fournis une palette de taille p-1 p-2 p-3, j'évite donc de faire des valeurs arbitraires qui sont mauvais, et j'ai un site beaucoup plus beau qu'avant. De plus souvent, mon css ressemble à rien, j'ai essayé BEM et tout, mais au bout d'un moment j'écris des classes n'importe comment, je manque d'inspiration pour les noms et ça devient presque du lorem ipsum comme nom. Trop pratique quand je cherche à ajouter des div flex, combien de fois j'ai mis comme classe juste `flex flex-col gap-2` ou `flex flex-row gap-2` combien ? tellement pratique en 2s c'est ajouter, pas besoin de faire une classe juste pour ça ! Pour toutes ces raisons j'utilise au quotidien tailwind, mais voila je serai jamais designer, jamais dans une équipe de 100 dev front, je reste sur mon back et quand je fais un back-office pour mon back, j'utilise tailwind.
Pour al partie ou le code CSS est compilé que si on utilise les class, dans le cas ou les classes sont ajoutées via du JS, elles ne sont donc pas utilisées à la compilation, je me trompe ?
Au top ta vidéo ca m'a donné envie de tester Tailwind alors que de base, je ne suis pas trop pour ! Dis-moi c'est quoi ton extension pour créer des composants ?
Yo ! Pour ce qui est du CiS (Code in Strings), l'extension de TailwindCSS couplée à "Intellisense for CSS class names in HTML" (dispo dans le marketplace de VS Code) règlent le problème parfaitement, j'ai toujours eu des petits soulignements rouges et jaunes pour me dire quand il y a une erreur :)
@@melvynxdev Et bien, d'ailleurs, ça fait aussi partie de la critique qu'il y a eu, encore du tooling par dessus du tooling, postcss, tailwind, le cli à mettre en place etc ...
Perso j'utilise la partie "functions and directives" (voir la doc) pour faire des ensembles de classes custom. Tu profites des deux mondes (classe utilitaire / class oldschool façon tailwind). La seule perte dut à ce mécanisme, c'est l'autocomplete qui marche pas sur ces classes custom dans l'IDE. Dans l'idée je sépare le thème du fonctionnel. Le fonctionnel reste dans les components (classes "pure" tailwind) et le thème reste dans le "css" (concaténation de classe taiwinds dans une classe à moi avec le @apply).
j'utilise astro avec tailwindcss + preact. En ce qui concerne les childrens passé a un composant preact par exemple (ici une image), je style ceux-ci en tailwindcss via attributes & leurs class sont effectives quand je recupere le child dans mon composant preact. ex:
Si vous avez VScode y a le plugin Tailwind avec ctrl + espace il te sort la liste des class de ton référentiel. Un truc très pratique avec tailwind c'est de pouvoir utiliser les @apply bg-white px-2 par exemple pour certains éléments comme les layouts ou marges tu les inséres dans ta div directement mais pour éviter d'avoir un truc trop verbeux à lire tu fais des class css en plus dans d'autres cas précis pour des composants
c'est clair, je connaissait pas non plus, & les classname a rallonge commencait a me 'chagriner', j'adopte direct, pour une bien meilleure lisibilité de mes composants
Perso je préfère faire du css ou sass pure quand je code des appli sur mésure... mais pour des appli admin qui dans la plus part des cas le designe importe peu... je me penche sue Tailwin
Salut @melvynxdev Personnellement je trouve ta solution de diviser tout en petit composant super. C'est exactement ce que je cherche à mettre en place comme outil pour favoriser un pont entre le prototypage et l'integration pour faciliter le travail des dev de notre agence. Je suis designer graphique de métier et m'excerce au dev sans être pour autant un crack en javascript ^^. Pourrait-on discuter d'une eventuelle collab pour obtenir en sortie un repo blueprint qui détaille plus lentement le process à suivre ? Ca va un peu vite pour moi dans la video. C'est top pour moi si tu es disponible pour realiser une rapide prestation de ce type. Merci d'avance de ton retour
@@melvynxdev ok c'etait plus dans l'idée que l'agence te missione pour un short tutoriel sur une partie bien spécifique ;-) J'ai finalement trouver une variante sans cslx, merci pour ta réponse.
Tailwind, c'est claqué au sol. C'est du style en ligne ! nommer les couleurs.... Le jour où le client décide que ce n'est plus du vert, mais du rouge.... un projet avec un multi-univers, ça doit être sexy à gérer avec ce machin.
