Tutoriel TailwindCSS en 1 HEURE | Comprendre l'ESSENTIEL en 2024

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 139

  • @thomasawounfouet7395
    @thomasawounfouet7395 6 месяцев назад +6

    merci pour la vidéo, elle m’a permis de bien comprendre la philosophie derière Tailwind afin de mieux l'apprehender.

    • @melvynxdev
      @melvynxdev  6 месяцев назад +1

      ça fait plaisir ça

  • @hleet
    @hleet 7 месяцев назад +2

    Super ! je voulais justement m'y mettre ! Merci beaucoup

  • @jc13OM
    @jc13OM 7 месяцев назад

    Vidéo top, comme toujours. Ta pédagogie est très très bonne.

  • @emmanuelrambeau8483
    @emmanuelrambeau8483 3 месяца назад +2

    VIdéo intéressante et très dense. J'ai appris beaucoup sur la partie Tailwind CSS.
    Je dois par contre te dire (dans le but d'un feedback positif !) que la partie pour installer le plugin Eslint à la fin est peu compréhensible. Tu vas très vite, il y a beaucoup de tic de langages ("tu fais ça", "tu fais machin", ..), il faut mettre en pause en permanence et tu es difficile à suivre. J'ai pris le parti de quitter la vidéo à ce moment pour essayer de me débrouiller par moi-même avec la doc.
    Et en plus, mais cela est plus dû à la rapidité de l'évolution du monde du dev... même si on est que 3 mois après la publication de la vidéo, je n'avais pas l'option pour avoir les settings en json au moment de l'install de eslint, j'ai donc eu un eslint.config.js qui était à configurer différemment. Je me suis un peu perdu à ce moment. J'ai vu qu'un autre viewer avait eu le souci dans l'espace commentaires.
    Il doit y avoir aussi des settings dans VSCode que tu as et que je n'ai pas, notamment car moi je dois survoler pour avoir le message d'erreur Eslint, alors que toi ça apparaît sur la droite. Je ne sais pas si tu as une vidéo pour configurer correctement son VSCode, je jetterai un oeil, ça super intéréssant.
    Grand merci pour le raccourci CTRL+D pour modification de masse sur VSCode, je ne le connaissais pas et j'adore. D'une manière générale, j'ai l'impression d'encore trop utiliser la souris et j'aimerais être meilleur avec mon clavier.
    Pour résumer, contenu très qualitatif, une ressource en FR ce qui est exceptionnel et je ne m'y attendais pas. Très content d'avoir appris avec toi !

    • @melvynxdev
      @melvynxdev  3 месяца назад

      Merci pour les feedbacks ! N'hésite pas à m'écrire ici afin que je les traite sérieusement : contact@melvynx.com

  • @Hirochifaa91
    @Hirochifaa91 5 месяцев назад

    Petit comm pour le référencement, toujours quali les vidéos Melvynx !

    • @melvynxdev
      @melvynxdev  5 месяцев назад

      Merci ❤️❤️❤️

  • @baptiste-coulon
    @baptiste-coulon 21 день назад

    Merci pour ce cours qui me change de bootstrap. Pour aller sur la doc plus rapidement depuis VScode il y a aussi le plugin 'tailwind Docs' 😁

    • @melvynxdev
      @melvynxdev  21 день назад

      ah yes mais j'ai jamais comrpis l'intêret

    • @baptiste-coulon
      @baptiste-coulon 21 день назад

      @@melvynxdev essai ctrl + p => 'tailwind doc flex direction' et dis moi si tu comprends enfin 😄

  • @asseytahago857
    @asseytahago857 4 месяца назад

    wahou !! j'étais vraiment dans le noire merci beaucoup et bon courage

  • @akardev
    @akardev 7 месяцев назад

    je te remercie pour ce cour taiiwindcss. J'attends avec impatience pour react comme tu l'as promis vraiment merci

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      Tu parles de Tailwind avec React ? Pour ça tu peux t'inscrire au challenge : mlv.sh/nt-challenge !

  • @elvispresley6861
    @elvispresley6861 5 месяцев назад

    géniaux tes tips, ainsi que le test de la CB 👍 merci

  • @gedeonecoumano538
    @gedeonecoumano538 2 месяца назад

    toujours des masters class 👏👏👏

  • @georgezimmer5622
    @georgezimmer5622 6 месяцев назад

    C'est cool j'ai pu rajouter plein de ken tent dans mon happy aie je suis trop content.

  • @MrFarfadetccc
    @MrFarfadetccc 7 месяцев назад

    Merci pour cette vidéo, je découvre actuellement tailwind CSS en même temps que laravel...

  • @monsieurm2904
    @monsieurm2904 7 месяцев назад

    Top top ! Je ne connaissais pas le"Toogle Word Wrap" pour VS.
    Aussi, je pense que mettre des chapitres sur la vidéo aiderai mieux !

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      Oui tu as raison je fais ça !

  • @JoseLeMalin
    @JoseLeMalin 7 месяцев назад

    Très bonne vidéo ! Merci !

  • @franckngoubounkou9930
    @franckngoubounkou9930 7 месяцев назад +1

    W😮h je recherchais comment ranger l ordre de mes classes pour une cohérence et la tu viens en sauveur 😊

  • @developpeurweb2.0
    @developpeurweb2.0 Месяц назад

    Merci pour la vidéo

  • @Martio_Martio07
    @Martio_Martio07 7 месяцев назад

    une masterClass encore

  • @damienburdo
    @damienburdo 6 месяцев назад

    Merci... très instructif !

  • @NicolasDelille
    @NicolasDelille 7 месяцев назад +4

    Je note pour les fonts "zaïze" ;)

    • @melvynxdev
      @melvynxdev  7 месяцев назад +1

      tkt je zaize à mort

  • @fredericlossignol3874
    @fredericlossignol3874 5 месяцев назад +2

    Par contre on est d accord que c est au détriment d un html light, propre et lisible. C est bien et rapide mais on sort complètement de la séparation des responsabilités. Pas de css, mais un html bien qui contient + de class css que de du html 😅

    • @melvynxdev
      @melvynxdev  5 месяцев назад +4

      Ton user s'en fou d'avoir un HTML light

  • @igabooyt
    @igabooyt 6 месяцев назад

    Super Tuto!!!! Big up!

  • @franckngoubounkou9930
    @franckngoubounkou9930 7 месяцев назад

    Tu me régales 😭. Machine 👏🙌👌💯✍️

  • @henrichabert6916
    @henrichabert6916 6 месяцев назад +1

    Hello ! Déjà, merci pour la vidéo, super instructif ! J’ai pas mal essayé d’utiliser Tailwind mais j’ai un peu de mal avec la manière dont on répète l’information, par exemple dans ta vidéo, le moment où tu définis les avec les mêmes classes pour tous. Pour moi ça n’est pas scalable d’avoir autant de répétitions et d’utiliser le multi cursor pour modifier.
    Ma question est donc, y a t’il une méthode simple dans Tailwind définir des wrappers de classes afin de ne pas se répéter, mais de le faire dans le html sans aller dans la config tailwind ? Quelle est selon toi les bonne pratiques sur ce type de problème pour éviter de se répéter au maximum et ne ps galerer si tu veux changer un truc pour tout ton site ?

    • @melvynxdev
      @melvynxdev  6 месяцев назад +1

      Oui, en React on ne fait jamais cette multiplication car on utilise le pouvoir des components

    • @githoweb
      @githoweb 6 месяцев назад

      Pour appliquer une modif sur tout un site sans répéter les modifs partout dans le markup, je ne vois que le css sémantique augmenté de ton propre framework sass (qui incluerait donc le design system configurable, tes breakpoints configurables, avec les variables + des helpers).
      Pour moi ça reste le meilleur des deux mondes : design system + separation of concerns (markup uniquement sémantique : le contenu et l'apparence restent totalement décorrelés et maintenable indépendamment l'un de l'autre). Du moment que tu connais bien les css et Sass, c'est pas forcément compliqué. Tu prends ce dont tu as besoin : le design system de Tailwind si tu veux (ou tout simplement celui des directeurs artistiques de ta boîte ou trouvés sur le net). Ca peut être un projet intéressant :)
      En fait ce sont les principes respectés dans tous les domaines du code en général. Je ne sais pas pourquoi on est revenu en arrière pour l'inté. Ou plutôt si : j'ai rarement vu les développeurs aimer faire du CSS ;) . C'est juste un moyen de ne pas coder du css, rien de plus :)
      Avec un framework, qu'il soit Tailwind ou Sass, on ne réinvente pas la roue à chaque nouveau projet : on réutilise toujours le même framework mais en changeant uniquement quelques valeurs de variables de configuration pour coller au design fait par les DA :) .
      Il n'y a pas une voie plus efficace qu'une autre : on fait les mêmes choses, avec les mêmes possibilités. Ca reste du style, mais d'un côté on ne touche pas au contenu (le markup) de l'autre, si.

    • @melvynxdev
      @melvynxdev  6 месяцев назад

      Il faut tester pour comprendre

  • @maxence7340
    @maxence7340 7 месяцев назад +1

    Super, merci pour le contenu. J'ai pas encore regardé la vidéo, mais j'aimerai vraiment que tu fasse une petite vidéo sur l'utilisation des ligne de commande pour les devs. Je suis en pleine formation dans le dev, et je vois bien qu'en ligne de commande tout va plus vite. Je veux apprendre

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      Hello, merci c'est noté effectivement c'est un bon sujet

  • @franckngoubounkou9930
    @franckngoubounkou9930 7 месяцев назад

    L amoureux de tailwindcss 😅. Toujours à l appel avec vite

  • @ArthurGonzalez-sh5oc
    @ArthurGonzalez-sh5oc 6 месяцев назад +1

    Salut, super vidéo!
    Vraiment bien expliqué on sent ta passion ça fais plaisir.
    Je suis confronté à un problème pour le plugin. il ne me crée pas de ".eslintrc.json" et ne me le propose même pas, quand je le crée en suivant les instruction sur le git hub je me retrouve face à une erreur comme quoi module.exports c'est du commonJS (en effet).
    Mais du coup je me retrouve bloqué et je ne sais pas comment débloqué la situation. Pourrais-tu me conseiller stp ?

    • @melvynxdev
      @melvynxdev  4 месяца назад

      Je te recommande de poser cette question sur mon Discord pour obtenir une réponse complète et précise : mlv.sh/discord

  • @bossdev-tb6we
    @bossdev-tb6we 5 месяцев назад

    Content ❌
    Kentent ✅
    i loved your little tuto, thank you so much, but the kentent killed me 😁🤣🤣

    • @melvynxdev
      @melvynxdev  5 месяцев назад

      C'est l'accent Suisse ;)

  • @swennytod
    @swennytod 16 дней назад

    top merci :)

  • @PhilippeDjabeur
    @PhilippeDjabeur 3 месяца назад

    génial 🤑

  • @YannMusicTherapy
    @YannMusicTherapy Месяц назад

    Salut Melvynx je découvre ta chaîne et c est cool merci.
    J'aurai juste une question, quand tu ajoutes des éléments je sais que parfois ton éditeur les créé tout seul en écrivant le début du composant, mais pour te donner un exemple, pour le bouton à 14 mn on dirait que tu fais du copié collé ? Si c est pas le cas ça m'intéresserai de savoir quel extension fait un bouton style click me en instant comme ça ;)

    • @melvynxdev
      @melvynxdev  Месяц назад

      Ah oui, j'avais laissé Copilot activé et c'est lui qui a créé tout ça 😉

  • @killiana4028
    @killiana4028 5 месяцев назад

    Hello ! Super vidéo très instructive ça m'a beaucoup aidé :) J'ai un petit soucis néanmoins, quand j'installe eslint j'ai des dizaines de warning de librairie dépréciées, est-ce que c'est encore maintenu ?

    • @melvynxdev
      @melvynxdev  5 месяцев назад

      Oui mais eslint est en migration d'une nouvelle mise à jour

  • @hhfrancois
    @hhfrancois 5 месяцев назад

    Salut Melvynx, tu m'as convaincu de m'essayer à tailwind. Pour mon cas, j'utilise angular. Merci
    J'ai néanmoins une petite question. Cela a t'il vraiment un sens d'utiliser ce genre de framework quand on utilise une librairie de composants type angular-material ?
    J'ai par ailleurs du faire un petit fix, car par défaut tailwind rajout un before/after avec un border-style=solid, ce qui posait problème avec les composants material...

    • @melvynxdev
      @melvynxdev  3 месяца назад

      Viens en parler ici : mlv.sh/discord

  • @lolibrowniss
    @lolibrowniss 2 месяца назад

    Si on a jamais codé qu'on est étranger à ce domaine qu'est ce que je dois regarder avant cette vidéo. C'est pour un client qui m'a parler de tailwind je pense pour sa newsletter / blog des conseils?

    • @melvynxdev
      @melvynxdev  2 месяца назад

      Avant de s'intéresser à Tailwind, il faut connaître les fondamentaux de HTML et CSS.

  • @ibrahimnsangou862
    @ibrahimnsangou862 Месяц назад

    Tu utilises quel logiciel pour faire le screen sur une partie du Site que tu fais en demo ??

  • @jemshjms
    @jemshjms 7 месяцев назад

    cool!✨

  • @pierre-jeanchancellier8955
    @pierre-jeanchancellier8955 7 месяцев назад

    Merci pour cette vidéo où j'ai pu apprendre qqes tips. C'est toi qui m'a convaincu il y a qqes mois de passer Tailwind ^^ Et je t'en remercie.
    Pour formater mes classes Tailwind, j'utilise "prettier-plugin-tailwindcss" car je formate mon code avec prettier ET eslint (mais suite à ta vidéo j'ai l'impression que je pourrai ptet me passer de prettier). Par contre, je cherche à "empiler" les classes Tailwind qd il y en a un certain nombre et je n'ai pas trouvé comment faire. Je suis sûr qu'il doit y avoir une solution car je l'ai vu sur l'éditeur de code en ligne StackBlitz par ex. Une idée ?

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      Je suis pas sûr de comprendre ton dernier problème ? Mais prettier tailwind est inutile si tu utilises le plugin eslint qui gère déjà l'ordre des classes ;)

    • @pierre-jeanchancellier8955
      @pierre-jeanchancellier8955 7 месяцев назад

      @@melvynxdev Quand tu as 25 classes Tailwind, t'es obligé de scroller horizontalement. J'aimerais que le code soit formaté de sorte à ce qu'il y ait une seule class Tailwind par ligne à partir d'un certain nombre.

  • @mikaelantoine2338
    @mikaelantoine2338 7 месяцев назад

    Salut Melvynx, au top ta vidéo, merci ;)
    J'ai juste une question, quand j'installe eslint, il ne me propose pas en format json, du coup impossible de rajouter la ligne dans extends... J'ai un fichier eslint.config.js à la place. J'ai fais la manip à plusieurs reprises, une idée ? Merci !

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      Oui il faut choisir json quand il te propose ;) sinon tu peux juste le creér manuellement

    • @mikaelantoine2338
      @mikaelantoine2338 7 месяцев назад

      @@melvynxdev il ne me le propose pas justement. Je vais chercher pour le config manuellement, merci !

    • @loucabaigneres5754
      @loucabaigneres5754 5 месяцев назад

      ​@@mikaelantoine2338 Hello Mikael :)
      Je rencontre le même souci que toi haha
      De ce que j'en ai compris, ".eslintrc.json", c'est l'ancienne version de "eslint.config.js". Du coup les mêmes configurations sont possibles, simplement elles sont faites différemment.
      Mais ça ne m'empêche pas de rencontrer quelques difficultés, sinon c'est trop facile :))
      Donc je me demande si tu as fini par trouver une solution vis-à-vis de ce fichier ? Spécifiquement, ce qui me pose problème, c'est que même si j'installe "npm i -D @angular-eslint/template-parser", je ne sais pas vraiment comment l'ajouter à "eslint.config.js" pour le faire fonctionner. Est-ce que par hasard tu aurais une solution ? Tu me sauverais la vie 😅
      Merci d'avance !

    • @mikaelantoine2338
      @mikaelantoine2338 5 месяцев назад

      @@loucabaigneres5754 Salut, non désolé, il faudrait que je refasse tout depuis le début dès que j'ai un moment. Si jamais je trouve je te le dirai.

    • @loucabaigneres5754
      @loucabaigneres5754 5 месяцев назад +1

      @@mikaelantoine2338 Oh, ne t'embête pas pour moi, je demandais au cas où tu aurais eu la solution sous la main :) Merci pour ta réponse en tout cas !

  • @florian1563
    @florian1563 7 месяцев назад

    Bonjour, merci pour cette vidéo tailwind ! malheureusement j'ai un petit problème, le bouton click me n'apparait pas a cause du export, et lorsque je l'enlève il apparait mais sans le style. Si quelqu'un à déjà eu le même soucis et à pu le régler cela m'aiderait énormément

  • @gulainjosephnkundiye
    @gulainjosephnkundiye 3 месяца назад

    Est ce que tu peux partager le lien pour les challenges React svp. Merci

    • @melvynxdev
      @melvynxdev  3 месяца назад

      Pour l'instant les challenges js/React sont réservés à mes étudiants de formations.

  • @moneyfr
    @moneyfr 7 месяцев назад

    presetwindplus : flex|10|50|[500rem] au lieu de grow-10 shrik-50 basis-500rem ou p-6-4-8-201 pt-6 pr-4 pb-8 pl-201 or py-6-8 px-4-201

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      ??

    • @moneyfr
      @moneyfr 7 месяцев назад

      @@melvynxdev c'est ce que je peux faire avec mon alternative de tailwind utilisant unocss) ==> presetWindPlus

    • @moneyfr
      @moneyfr 7 месяцев назад

      J'ai fait mon alternative à tailwind avec unocss j'aimerais te montrer

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      Tu fais des choses étrange, viens sur mon discord et partgae moi ça

  • @Fr_Teni
    @Fr_Teni 5 месяцев назад

    c'est quel abonnement de tailwind qui que tu as pour expliquer le fonctionnement stp

  • @devZone7
    @devZone7 7 месяцев назад +1

    It's amazing 😍

  • @JavaChrist31
    @JavaChrist31 6 месяцев назад

    Salut Melvynx Je très intéressé par ta formation, mais j’espère que le rythme est moins élevé, sinon je décroche.

    • @melvynxdev
      @melvynxdev  6 месяцев назад

      Hello, merci normalement c'est moins élevé. Tu peux tester gratuitement ici mlv.sh/nt-c

  • @Lunolux
    @Lunolux 7 месяцев назад

    superbe vidéo

  • @Orkblan
    @Orkblan 15 дней назад

    Vidéo sympa mais je ne suis toujours pas convaincu par Tailwind, je trouve que toutes ces classes rendent la lisibilité du fichier HTML compliquée. Je vais quand même faire le test de l'essayer.

    • @melvynxdev
      @melvynxdev  15 дней назад

      C'est l'argument de beaucoup, mais la flexibilité, la simplicité, c'est énorme.

  • @CoulibalyCheickMohamed
    @CoulibalyCheickMohamed 7 месяцев назад

    Stp une vidéo sur Framer Motion avec Next js

  • @TheOptimist03
    @TheOptimist03 7 месяцев назад +1

    Perso je suis nul en UI donc pas pour moi tailwind , je le connais mais si vous êtes mauvais en design privilégiez bootstrap , si vous gérez bien le côté design la foncez sur tailwind

    • @dylan051100
      @dylan051100 7 месяцев назад

      Tailwind propose des components comme bootstrap.

    • @TheOptimist03
      @TheOptimist03 7 месяцев назад

      @@dylan051100 moins que bootstrap qui lui est essentiellement basé sur des composants …

    • @dylan051100
      @dylan051100 7 месяцев назад

      @@TheOptimist03 Oui, évidemment bien moins que bootstrap. Le problème de bootstrap est qu’il est le deuxième framework css le plus téléchargé au monde et que très vite tu peux te retrouver à faire des sites web qui ressemblent plus à des clones qu’à des sites web.

    • @TheOptimist03
      @TheOptimist03 7 месяцев назад

      @@dylan051100 oui c’est sure , après faut quand même y aller mais c’est Sure que l’exemple d’un bouton bootstrap , bah tu le reconnais entre 1000 … direct ça se voit un site en bootstrap

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      Justement pas besoin d'être bon en design pour Tailwind

  • @lanfyp
    @lanfyp 7 месяцев назад

    merci !

  • @franckngoubounkou9930
    @franckngoubounkou9930 7 месяцев назад

    Franchement 😊 merci beaucoup, la configuration faisait trop peur pour tailwindcss

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      De rien 😁 J'espère que j'ai pus t'aider

  • @yanb4315
    @yanb4315 7 месяцев назад

    🛠🚀🤩

  • @changemotion
    @changemotion 3 месяца назад +1

    T'es trop rapide pour un novice parfois on est perdu.

    • @melvynxdev
      @melvynxdev  3 месяца назад +1

      C'est vrai que c'est un format où les choses sont pas mal compressées !

    • @changemotion
      @changemotion 3 месяца назад

      @@melvynxdev merci j'ai appris beaucoup de choses

  • @Landry-gd8vg
    @Landry-gd8vg 3 месяца назад +1

    OK pour ce cour. Mais vous êtes trop rapide. J'ai rien compris. Et je ne pense pas m'abonner 😢

    • @melvynxdev
      @melvynxdev  3 месяца назад

      C'est un format court où il faut rassembler pas mal d'infos !

    • @IbrahimEkolele-zm7li
      @IbrahimEkolele-zm7li 3 месяца назад

      Pour mieux appréhender la notion, il faut connaître css

  • @FranckMekoulou-i7w
    @FranckMekoulou-i7w 7 месяцев назад

    Désolé mec, vraiment, mais Tailwind vraiment j'aime pas, j'ai tout essayé pour aimé ça et me sentir à l'aise dessus mais je préfère écrire du CSS, c'est plus clair, c'est pas moche, ça ne me sature pas le HTML et je suis ouvert a créé n'importe quoi (vraiment), là où faire du motion design semblerait être une vrai guère nucléaire avec Tailwind, en CSS, tranquille, merci quand même , on peu pas dire que j'ai refroidit 1h pour rien...

    • @melvynxdev
      @melvynxdev  7 месяцев назад +9

      Écoute c'est un tuto pour apprendre Tailwind pas te convaincre

    • @maxence7340
      @maxence7340 6 месяцев назад +2

      C'est bizarre parce que je débute dans le développement, et j'ai du mal avec ces framework, je préfère aussi utiliser CSS vanilla, surtout que j'invente rien, je refais à l'identique un design créé par un un professionnel sur figma. En fait j'aimerais vraiment savoir l'utiliser, ça a l'air plus rapide, mais je n'arrive pas à faire le lien entre mon design figma avec les valeur en px des titre, spacing et autre, et tailwind

    • @FranckMekoulou-i7w
      @FranckMekoulou-i7w 6 месяцев назад

      @@maxence7340 TailwindCSS fournis des class utilitaires mais fourni un moyen de cree le notre tu vois? cela est dans la doc, par exemple pour avoir un taille de texte perso, ce serait genre `text-[ta valeur ici]` et elle peut etre en presque toute les uniter que tu connais en CSS

  • @EVENPRONO
    @EVENPRONO 2 месяца назад +4

    La prochaine fois essaie y aller moins vite. Tu veux nous apprendre un truc pas nous montrer tes performances

    • @melvynxdev
      @melvynxdev  2 месяца назад +1

      Pas facile pour un format vidéo aussi court.

    • @nouveaumonde272
      @nouveaumonde272 Месяц назад

      @@melvynxdevon va mettre ça sur le dos de la passion 😂 1h07 c’est pas assez. Et puis c pas comme si on pouvais ralentir la vidéo

    • @lililili1986
      @lililili1986 Месяц назад

      Ralentis la vidéo c'est la base , c'est du contenu gratuit non mais sérieux
      La prochaine fois tu feras une vidéo avec ton savoir mec ...

  • @dioouffleur8495
    @dioouffleur8495 6 месяцев назад +1

    Merci ! Très bonne vidéo

  • @LaurenceSagot-w4p
    @LaurenceSagot-w4p 5 месяцев назад

    Super vidéo, merci !

  • @fatfat5186
    @fatfat5186 6 месяцев назад

    bonne explication, toujours top