TAILWIND EST MORT ? drama...

[@Soukouna4252]

Peut tu faire une vidéos sur tes extensions vs code

[@melvynxdev]

j'ai déjà fais

[@homoursporc8469]

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 ?

[@melvynxdev]

Ça dépend, Tailwind est assez malin pour trouver les références des classes si elles sont dans du JavaScript aussi !

[@flaviien]

Je n'ai jamais compris quel problème Tailwind résout

[@yanisoulhaci3369]

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.

[@melvynxdev]

Non non ! Style est *pas optimisé* par le navigateur, niveau calcule. Les classes, qu’il y en ai 50 ou 3 c’est mieux que les styles

[@yvannguekam9772]

possible d'avoir le lien pour ce tweets du 2 sept 2022 stp

[@melvynxdev]

je vais galérer ahs

[@rawz06]

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.

[@melvynxdev]

Aah tellement beau !

[@paulboncar]

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]

Marche pas chez moi, dans un gros projet... A voir mais je note !

[@ZeldriFR]

@@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 ...

[@Jacjac__]

Tailwind c'est comme Boostrap CSS à l'époque finalement. Rien de mieux que le bon vieux CSS maison pour du gros projet 👌

[@melvynxdev]

Ah c'est méchant de les comparers

[@clementlaval1512]

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

[@rawz06]

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.

[@melvynxdev]

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

[@moneyfr]

Vous savez ajouter du tailwind mais pour les child éléments

[@melvynxdev]

ah non

[@boristherin4104]

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:

[@moneyfr]

J'aimerais savoir la différence avec windi css

[@rawz06]

C'est le même principe, sauf que tailwind a une plus grosse communauté

[@melvynxdev]

👌

[@manouhaouzi2530]

Super !!! Très clair !

[@melvynxdev]

Merci !

[@valentinlaveau504]

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 ?

[@melvynxdev]

Ahah génial ! c'est marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster

[@aminetakdjout6545]

Merci, bien expliqué

[@melvynxdev]

Avec plaisir

[@charlyleroy7538]

Je connaissais pas clsx, et c'est vrai que j'avais une vilaine bouillie pour mettre les infos dans className... Là ça sera plus propre, merci =)

[@melvynxdev]

Génial !

[@boristherin4104]

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

[@thiernoidrissadiallo5728]

Je préfère utiliser sass perso

[@melvynxdev]

xD

[@christopherequin]

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).

[@melvynxdev]

Moui, pour le thème, mieux vaut utiliser la config tailwind et des lib comme daisyui

[@melvynxdev]

Moui, pour le thème, mieux vaut utiliser la config tailwind et des lib comme daisyui

[@issangolocoulibaly8325]

Sincèrement je ne vais m'en tenir qu'au css

[@melvynxdev]

xD

[@ibrahimtraore1230]

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

[@melvynxdev]

Oui, hésite pas !

[@stephanestadler1219]

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]

Merci ! J'avoue pas être sûr de pouvoir t'aider

[@stephanestadler1219]

@@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.

[@melvynxdev]

@@stephanestadler1219 Ah j'avais pas compris. Pour des trucs pro, mieux vaut passer par mon site et mon mail

[@stephanestadler1219]

@@melvynxdev ok, je vais en discuter avec l'agence pour definir nos priorités sur le Q1 de cette année et reviendrais vers toi par email donc. :-)

[@dvh_bzr]

Moi j'utilise juste Tailwind avec Prettier. Les classes se réordonne de manière logique et c'est très simple

[@melvynxdev]

Oui moi aussi

[@tutoherman3104]

L'utilisation de tailwindcss devient beaucoup plus intéressant avec un framework comme Angular

[@melvynxdev]

COMME REACT*

[@ecodev-INT]

lol@@melvynxdev

[@MrNiuxe]

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.

[@melvynxdev]

Faut arrêter d’être dans le meta versw

[@quentin8762]

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

[@melvynxdev]

Attention, apply est à utiliser pas trop souvent mais oui tu as raison

[@cotulewin269]

Perso J utilise tailwind car niveau destin système je suis proche de 0 🤣

[@melvynxdev]

😂😂

[@jeandarius8791]

J'ai toujours aimé bulma css.

[@melvynxdev]

👌

[@jeandarius8791]

@@melvynxdevc'est possible une petite vidéo pour savoir ce que vous en pensez ?