Easily Set Up Tailwind CSS with Vanilla JavaScript in 10 Minutes

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 65

  • @arielspalter7425
    @arielspalter7425 3 роки тому +3

    Thanks for the tutorial. I only heard of Tailwind but never worked with it. But, man, is this such a cumbersome setup....

  • @arniyhjs
    @arniyhjs 3 роки тому +4

    This has to be best video out there on tailwind setup for vanilla HTML
    Thanks James really appreciate.

  • @dsa0decoded
    @dsa0decoded 3 роки тому +4

    so far the best video on tailwind installation on youtube :)

  • @codeSTACKr
    @codeSTACKr 3 роки тому +7

    I love Tailwind CSS!!

    • @JamesQQuick
      @JamesQQuick  3 роки тому +1

      Samesies :)

    • @dylanmilo4456
      @dylanmilo4456 3 роки тому

      Dunno if you guys gives a damn but if you are bored like me during the covid times then you can watch all the new movies on Instaflixxer. Been binge watching with my brother for the last months :)

    • @brysencristian988
      @brysencristian988 3 роки тому

      @Dylan Milo Definitely, have been using InstaFlixxer for years myself :)

  • @davejones4740
    @davejones4740 4 місяці тому +1

    absolute nightmare tailwind to setup. i've followed every video on installing this and it's hopeless. Followed your instructions exactly.

  • @noopurp123
    @noopurp123 3 роки тому +3

    One quick suggestion:
    _const purge = process.env.NODE_ENV === 'production' ? true : false_
    can be transformed into
    _const purge = process.env.NODE_ENV === 'production'_

    • @JamesQQuick
      @JamesQQuick  3 роки тому +1

      Haha yep. I realized that right after. I originally was using it differently and didn’t go back and update that part. Great catch

  • @tim_t
    @tim_t 3 роки тому +2

    Hurrah for Tailwind CSS!

  • @SadDamniT
    @SadDamniT 3 роки тому

    Tailwind CSS is Love!!

  • @noopurp123
    @noopurp123 3 роки тому +3

    Yes Sir, more TailwindCSS please. BTW any trick to get rid of the @tailwind directive warning in the CSS file in VS Code?

  • @programmercouple
    @programmercouple 3 роки тому

    You have mastered the art of creating Thumbnails

  • @BlenderHelixAlpha
    @BlenderHelixAlpha 9 місяців тому

    I'm not sure what this has to do with using JS and tailwind at the same time but thank you

  • @29namankumar29
    @29namankumar29 3 роки тому +2

    Thank U sir for this video!

  • @andreroydev
    @andreroydev 3 роки тому

    More TailwindCSS! 🙏😁

  • @ngonimugumwa6374
    @ngonimugumwa6374 3 роки тому

    Hey James! Great video!
    Mind me asking which theme you’re using here?

  • @MaxProgramming
    @MaxProgramming 3 роки тому +1

    At 2:11. The style-z moment 😂

    • @JamesQQuick
      @JamesQQuick  3 роки тому +1

      Hahaha had to make sure to emphasize the last part

  • @blackpro5763
    @blackpro5763 3 роки тому

    Could you please tell the camera model, lens and mic you use?

  • @pguti778
    @pguti778 3 роки тому

    Tailwind is great! What is tailwind?

  • @ericzorn3735
    @ericzorn3735 3 роки тому +1

    Hey, what theme are you using? Looks cool. Also, this is amazing

    • @rahulsriram6295
      @rahulsriram6295 3 роки тому +2

      codeSTACKr theme

    • @ericzorn3735
      @ericzorn3735 3 роки тому

      @@rahulsriram6295 thank you

    • @JamesQQuick
      @JamesQQuick  3 роки тому +1

      Ya he actually commented on the video :) go tell him you like it :)

    • @ericzorn3735
      @ericzorn3735 3 роки тому

      @@JamesQQuick who is the theme creator? @rauhl?

    • @rahulsriram6295
      @rahulsriram6295 3 роки тому

      @@ericzorn3735 codeSTACKr with a tick

  • @shariquekhanoriginal
    @shariquekhanoriginal 3 роки тому

    3:34 whats 731.8k (gzipped:91.2k) file size? Which extension?

  • @ceocodes6229
    @ceocodes6229 2 роки тому

    How do I get the rotating courser thing

  • @mayanksaxena2513
    @mayanksaxena2513 3 роки тому

    i am using tailwind css with next js but when i deploy my website the tailwind css not working it do not get pplied in my website how to solve

  • @rajmohans1408
    @rajmohans1408 3 роки тому

    "watch `npm run build` ./dist" not working for me. there is no folder named dist. no such file or directory,

  • @NickGill28
    @NickGill28 3 роки тому +1

    TMNJ!!!

    • @JamesQQuick
      @JamesQQuick  3 роки тому +1

      What does that stand for? Lol

    • @NickGill28
      @NickGill28 3 роки тому +1

      @@JamesQQuick - Spelling error, TMNT! I have the same shirt.

    • @JamesQQuick
      @JamesQQuick  3 роки тому +1

      Ahhhh got it. Yassss!!!!

  • @bryanltobing
    @bryanltobing 3 роки тому +1

    what font that you used in your vscode? great video and explanation btw

    • @JamesQQuick
      @JamesQQuick  3 роки тому +1

      Thank you! And it’s cascadia code

  • @areyousureyouareawake
    @areyousureyouareawake Рік тому

    Yeah, it works, but what is the point of it, if i cannot use tailwind JS?

  • @rohitjadhav4868
    @rohitjadhav4868 3 роки тому +1

    Why not just use vite it is great for setting up boilerplate and then we can setup tailwinds

    • @JamesQQuick
      @JamesQQuick  3 роки тому +1

      Maybe so. I’ve never used it. I’d love to know more!

    • @MaxProgramming
      @MaxProgramming 3 роки тому

      ​@@JamesQQuick Vite is such a great tool for scaffolding out: Vanilla, React, React TS, Vue, Vue TS, and some more boilerplates. And it's super fast.
      I use Vite nowadays instead of Create React App. It's a lot faster and also, it's quite easy to set up Tailwind in any Vite app

    • @MaxProgramming
      @MaxProgramming 3 роки тому

      I agree, Vite is really powerful and great! It just needs some more reach!

    • @J90JAM
      @J90JAM 3 роки тому +1

      @@MaxProgramming I've had no luck getting it to work with vanilla JS, I've followed the exact setup on the Tailwind Labs videos, but it's not being converted into my "dist/assets" folder. I've triple-checked everything but no change.

    • @MaxProgramming
      @MaxProgramming 3 роки тому

      @@J90JAM Are you using TOTAL VANILLA JS or using something like Vite?

  • @sachin__ak
    @sachin__ak 3 роки тому

    watch is affected by prototype pollution

  • @nikyabo8326
    @nikyabo8326 2 роки тому

    Fuck so you can do this? I tend to add vanilla css just to get it interactive and be programmed by JS. Didn't realize this was possible.

  • @iiPumpkin
    @iiPumpkin 3 роки тому +1

    npx tailwindcss -o tailwind.css --watch

    • @ahmedfattal9569
      @ahmedfattal9569 2 роки тому

      @shobowale tola joshua I'm watching it right now and I have the same problem but I think the whole thing has changed since v3 came out, but not sure 100%

  • @justingiovanetti
    @justingiovanetti 6 місяців тому

    How is this vanilla js? Vanilla js is a blank html file with a script tag. You rattled off like 5 different dependencies, along with entire npm setup.

    • @GarrattCampton
      @GarrattCampton 3 місяці тому

      no a blank HTML file is HTML. javascript is a javascript file. You should google "seperation of concerns". And if you just want a CSS to throw in to a HTML then you should look at Bulma CSS or Bootstrap

    • @GarrattCampton
      @GarrattCampton 3 місяці тому

      SoC in webdev is Structure (HTML) Design (CSS) Functionality (JS)

  • @eyehear10
    @eyehear10 Рік тому

    Too much npm, doesn’t feel very vanilla js