How to Setup Tailwind CSS in VS Code?

Sdílet
Vložit
  • čas přidán 8. 09. 2024
  • Join the Community → www.jsanytime....
    In this video, I'll show you how you can install Tailwind CSS to your project. I'll not just show you the steps but also the explanation of each and every step. If you're new to Tailwind CSS (@TailwindLabs) and struggling with the installation, follow along with me.
    This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Tailwind CSS in their web applications.
    ► Install VSCode : code.visualstu...
    ► Install Nodejs : nodejs.org/en
    ► Tailwind CSS Documentation : tailwindcss.co...
    #tailwindcss #installation #tailwind #webdevelopment
    =========================================
    ► Follow on Github to get latest source code of projects: github.com/Eti...
    ► For more content like this, subscribe to my channel: / etishagarg
    ► Support me to make more such videos
    Patreon: / etishagarg
    ► Follow Me On Social Media
    LinkedIn: / etisha-garg
    Twitter: / gargetisha
    Instagram: / gargetisha
    ► For business inquiries, reach us on: gargetisha@gmail.com

Komentáře • 187

  • @EtishaGarg
    @EtishaGarg  Před 11 měsíci +7

    How to Setup Tailwind CSS in React JS?
    🔗Video Link - czcams.com/video/L3wJe66tlBk/video.html

    • @aluyaehis2061
      @aluyaehis2061 Před 6 měsíci +2

      Your video really helped me set my tailwind CSS well in the terminal, it was very helpful. But my colour didn't change like your in the background.
      Can you help me fix the issue too?

    • @EddyConejo
      @EddyConejo Před 4 měsíci

      @@aluyaehis2061 You probably didn't link the html to the css

  • @mr.yashff9625
    @mr.yashff9625 Před 4 měsíci +7

    Trust me I have wasted my 2-3 days but I wasn't getting the best video but this is the best video I will recommend u guys ...😊😊

  • @devrishigupta6223
    @devrishigupta6223 Před 4 měsíci +12

    how to fix the two warning that is shown " No utility classes were detected in your source files " Please help

  • @kelly_browning
    @kelly_browning Před 11 měsíci +9

    BEST TUTORIAL on installing!! I've gone through 4 others and they made it so complicated. Well done!

  • @Orion599
    @Orion599 Před měsícem +3

    Hello stranger, don't worry, you're not alone in the struggle. Many of us stare at the documentation, hoping it will start making sense if we look at it long enough

  • @abdulgaming5018
    @abdulgaming5018 Před 5 měsíci +2

    iam doing everything right but still last mei bg color implement nia ho rha

  • @AbdulHadi-ek4lk
    @AbdulHadi-ek4lk Před 23 dny

    wanted to thank u because when i installed tailwind by watching some other videos
    they were not working properly
    then i watched this tutorial and everything worked perfectly fine
    once again
    thank u

  • @victorbabalola6094
    @victorbabalola6094 Před 2 měsíci +3

    i have a problem, every time i try to change the background color it doesn't work or try to add a new style

  • @SebooEdits
    @SebooEdits Před 10 měsíci

    Thank You, Didi. I watched many videos for setting up Tailwind, but none of them were working. After wasting a lot of time on other people's videos, I watched your video. It was very helpful, and you explained every line very well. My setup, which was not working, is now up and running. Thank you so much. Love you didi

  • @typowa615
    @typowa615 Před 11 měsíci +2

    och god I was going through several youtube videos about how to install tailwind and only you could explain it simple and quick. Instant subscribe! thanks !!!

  • @user-pp4vz4du4f
    @user-pp4vz4du4f Před 8 měsíci

    i literally watched 100s of videos today , none of them worked , lastly tried yours it worked finally , am so heppy thank u soooo much

  • @mdshuvo-gr7fw
    @mdshuvo-gr7fw Před 5 měsíci

    Thank you very much for this tutorial I was trying to install it almost for 1 hour but I failed and I was quitting to try then I told myself "I will follow just one last tutorial" and yea it was your tutorial that worked for me 😀

  • @user-dk1ns1ih8c
    @user-dk1ns1ih8c Před 6 měsíci +2

    Thank you for create sort and informative video.

  • @adammarley5616
    @adammarley5616 Před 7 měsíci +1

    Spent 2 days trying to research this setup and watched A LOT of videos. Yours was the best and most up-to-date. Thank you @EtishaGarg

  • @skshaidhossain5460
    @skshaidhossain5460 Před 11 měsíci +1

    yes i need the react installation with TailwindCSS. Thank you so much for this masterpiece 🙌

  • @kingharji9170
    @kingharji9170 Před 4 dny

    07:04 I followed each step till there, But at last your site gets proper styling & mine was simple with white background & black text(Automatically).

  • @ashishkumarsharma9606
    @ashishkumarsharma9606 Před 11 měsíci +2

    Please make separate videos for them it will really helpful to us ❤

  • @kylewhileyoung
    @kylewhileyoung Před 21 dnem

    You are the best. everyone else talks about using it with Vite or react. I wondered this stand-alone use case

  • @a1m4thah3d
    @a1m4thah3d Před 4 měsíci

    THANK you SO much for this video!!! I tried several other videos and could never get it but this one nailed it!

  • @AbhishekMad-jj6wh
    @AbhishekMad-jj6wh Před 3 měsíci +1

    did i have to repeat this process for every html file

  • @ManasTunga
    @ManasTunga Před 10 měsíci +1

    Thanks for making things simple and easy to understand. Helped me to get started with tailwind

    • @ananyasingh2864
      @ananyasingh2864 Před 8 měsíci

      hey help me i am not able to do it as the moment i start writing this npm -v it is showing error please help

    • @ManasTunga
      @ManasTunga Před 7 měsíci

      @@ananyasingh2864 have you installed nodejs correctly ? npm is a node package manager if you have installed node correctly then npm -v must show npm's current installed version.

  • @dhruthiaddagatla2959
    @dhruthiaddagatla2959 Před měsícem

    Excellent explanation !!!
    Saved our lives, thanks a ton!! ❤

  • @sameerdevil8875
    @sameerdevil8875 Před měsícem

    It is simple and to the point ❤

  • @milankbudha
    @milankbudha Před 11 měsíci

    thank u so much...i have watched other tutorials but not worked properly...Your tutorial saved my precious time

  • @abhishekprajapati5319
    @abhishekprajapati5319 Před 5 měsíci +1

    very helpful thanks a lot

  • @nitinrai8381
    @nitinrai8381 Před 11 měsíci

    It was so simple prior to this video i was simply doing it by adding cdn thanks alot Etish

  • @abdulmujeebusman1645
    @abdulmujeebusman1645 Před 8 měsíci +6

    I first tried to do the npm it was saying error then i downloaded node.js still not working 😢 please help

  • @ym1188
    @ym1188 Před 7 měsíci

    my style.css was empty but except that everything was fine. I re-opened the terminal, chose my file and re-triend. eventually it is worked. Thanks for the instruction Etisha

  • @Master_oogway_loves-you
    @Master_oogway_loves-you Před 3 měsíci

    My 2 days of suffering is over now 😊 thanks ma'am

  • @RadwanRa
    @RadwanRa Před 7 měsíci

    thank you for sharing this video it helped me alot it been an hour im trying to figure it out how to run tailwind i searched alot and finally i found ur video and thank you

  • @narendrakajla77
    @narendrakajla77 Před 8 měsíci

    Thankyou so much ❤ very simple explanation and in depth step by step video. Thanks again, please keep making such amazing videos

  • @Anshydv3
    @Anshydv3 Před 10 měsíci

    thank you so much di , i have watched many videos, but i was unable to install ,
    but you nailed it 🥳

  • @prabinchaudhary9691
    @prabinchaudhary9691 Před 11 měsíci

    Tried many but this one worked so well..liked the way everything is explained 😊

    • @ananyasingh2864
      @ananyasingh2864 Před 8 měsíci

      as the moment i start writing this npm -v it is showing error please help

  • @graydaff-so4fe
    @graydaff-so4fe Před 2 měsíci

    Thank you so much Etisha ! the script was the missing part for me. Very neat tutorial.

  • @contraspower6302
    @contraspower6302 Před měsícem

    Thanks alot very helpful best video🙏

  • @Anirban-fo9wi
    @Anirban-fo9wi Před 11 dny

    Ma'am for me output file style.css is blank ,how can I fixed it ??no tailwind default code are there.totally blank

  • @himanshuchaudhari9235
    @himanshuchaudhari9235 Před 7 měsíci

    Thank you so much. I had spent whole day to figuring it out. But you saved me. 🤓

  • @himasheshu5548
    @himasheshu5548 Před 3 měsíci

    Thank you madam . video was very helpfull 😁😇

  • @funjon2746
    @funjon2746 Před 4 měsíci

    This video was very important for me so thank you very much maym...🥰🥰🙂🙂 I am from bangladesh

  • @AswinKumar-jo7kg
    @AswinKumar-jo7kg Před 4 měsíci

    great very best one on installing Tailwind CLI

  • @timbauer399
    @timbauer399 Před 2 měsíci

    Amazing tutorial! Thanks for posting. 🙂

  • @shubhammaurya3309
    @shubhammaurya3309 Před 5 měsíci +1

    Thank you didi 🎉...

  • @imtisalmustafa3819
    @imtisalmustafa3819 Před 8 měsíci

    Thank you very Much for this .. step by step proper guide

  • @user-pe2ox5np9o
    @user-pe2ox5np9o Před rokem

    Hello mam ,
    thank you for providing this contents latest video it helped me lot. I was trying to do from last hours after lot of trouble got your video . thank you so much.....

  • @timilehinogunlade5365
    @timilehinogunlade5365 Před měsícem

    thank you very much for this video

  • @irfanullah2910
    @irfanullah2910 Před 8 měsíci

    Very interesting and helpful video, easy to understand and grape the concepts.

  • @thedarksterbhupi540
    @thedarksterbhupi540 Před 3 měsíci

    Filhal to Java chal rahi hai but tailwind aapse hi sikhenge 👀❤️

  • @pri8112
    @pri8112 Před 2 měsíci

    Thank you sm omg finally i am able to download this

  • @eddy254-E
    @eddy254-E Před 4 měsíci

    This was the best one

  • @lualfemo
    @lualfemo Před 6 měsíci

    Thanks a lot for this video, you saved my life!!

  • @sunilchoudhary8216
    @sunilchoudhary8216 Před měsícem

    Hi
    unable to get update. every time click live server, when update the page

  • @riazmoosani7725
    @riazmoosani7725 Před 6 měsíci

    fantastic explanation. Thank you very much

  • @SoumyaRanjan-bm9rj
    @SoumyaRanjan-bm9rj Před 3 měsíci

    After excicuting the command properly in vs code still i am not getting the output.css file

  • @Aero_Dev_0
    @Aero_Dev_0 Před 6 měsíci

    Thanks sister, it works

  • @theproactivemindset
    @theproactivemindset Před 11 měsíci

    What a great explanation! thank you Etisha!

  • @abhivebs
    @abhivebs Před 2 měsíci

    warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.

  • @IttractDigital
    @IttractDigital Před 5 měsíci

    Thank you Didi for this video

  • @anjanadewan144
    @anjanadewan144 Před měsícem

    why the changes are not reflecting in my browser..plzzz help

  • @shwetachoudhary9003
    @shwetachoudhary9003 Před 7 měsíci

    thank you soo much i was suffering for this..

  • @aswinpk2426
    @aswinpk2426 Před 8 měsíci

    It’s really helpful one … thank you so much ❤

  • @user-qt8kc4of9c
    @user-qt8kc4of9c Před měsícem

    thqu sis

  • @nighthustler15
    @nighthustler15 Před 2 měsíci

    That was a nice session!💯

  • @firdausspensix
    @firdausspensix Před 5 měsíci

    thankyou this very helpfull

  • @chanchalnishad3
    @chanchalnishad3 Před 5 měsíci

    Thankyou so much ma'am

  • @mtnllmtnll
    @mtnllmtnll Před 5 měsíci

    Thank you so much. I got this bc of you!

  • @pradhumansingh8565
    @pradhumansingh8565 Před 6 měsíci

    thanks for giving installetion information.

  • @anasx2700
    @anasx2700 Před 5 měsíci

    Thank you so much.

  • @parico4489
    @parico4489 Před 5 měsíci

    YOU ARE A LIFE SAVER THANK YOU

  • @davejones4740
    @davejones4740 Před 8 měsíci +1

    Doesn't work as usual. Copied up until 04:17 exactly and errors as it doesn't creat the style sheet....

    • @EtishaGarg
      @EtishaGarg  Před 8 měsíci

      What is the error you're getting?

  • @laurajacobsen1131
    @laurajacobsen1131 Před 4 měsíci

    Thank you. Great video :)

  • @zuma573
    @zuma573 Před 3 měsíci

    Thank you very much

  • @parsamns6677
    @parsamns6677 Před 25 dny

    I followed everything but when i run it at the end, i get a plain white background with a simple black text. Why is that?

    • @JustAnotherDeveloper-b6v
      @JustAnotherDeveloper-b6v Před 24 dny +1

      npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
      Run this command it will work

  • @GulshanKumar-rm2fz
    @GulshanKumar-rm2fz Před 11 měsíci +1

    npm err missing script is occuring what to do?

  • @shashank_sharma_7
    @shashank_sharma_7 Před 6 měsíci

    Just perfect. Thanks

  • @29ibrahimsayed95
    @29ibrahimsayed95 Před 11 měsíci

    Best one ever. Crystal clear.

  • @rishabhsharma4875
    @rishabhsharma4875 Před 4 měsíci

    Hey, my npx tailwindcss init command doesn't work it show error, can you explain me what problem are in these command?

  • @kawsarmojumdar5192
    @kawsarmojumdar5192 Před 8 měsíci

    Thanks for the awesome tutorial

  • @Procomicartist
    @Procomicartist Před 3 měsíci

    I tried with another video but didn't work can I delete the folder and start all over? Would it affects the next try?

  • @heyOrca2711
    @heyOrca2711 Před 8 měsíci

    Thank you ma'am you helped me a lot

  • @Ashutosh07535
    @Ashutosh07535 Před 6 měsíci

    why do we need to use npm init -y before starting every project because even if i don't use it then package.json is automatically created after running the Tailwind commands from the Tailwind site

  • @user-qs4fk6lv5u
    @user-qs4fk6lv5u Před měsícem

    How to Setup Tailwind CSS in angular v16?

  • @ananyasingh2864
    @ananyasingh2864 Před 8 měsíci +1

    can anybody help...as the moment i start writing this npm -v it is showing error please help

  • @robertogutierrez7305
    @robertogutierrez7305 Před 8 měsíci

    You're awesome explaining!
    Suggestiion: how about DaisyUI and / or Flowbite?
    Thanks!

  • @riagupta39
    @riagupta39 Před 8 měsíci

    Thank you so much

  • @leeeric6292
    @leeeric6292 Před 8 měsíci

    Thanks for your help!

  • @piyush3819
    @piyush3819 Před 6 měsíci

    thank you so much you help me alot
    😊

  • @abhisweb2315
    @abhisweb2315 Před 7 měsíci

    Can u please tell me how should I build a package for deploying the project !!

  • @ayushk.c8395
    @ayushk.c8395 Před 8 měsíci

    --watch cannot be run in terminal
    ParserError:
    Line |
    1 | --watch
    | ~
    | Missing expression after unary operator '--'.

  • @saikiran0311
    @saikiran0311 Před 2 měsíci

    react vite is support for tailwind css or not

  • @saifullahMonmoy
    @saifullahMonmoy Před 9 měsíci

    Nice Explanation 👍👍

  • @thippareddy6609
    @thippareddy6609 Před 9 měsíci +1

    my body's color did not turn yellow what should i do? plz help

    • @elsoil3387
      @elsoil3387 Před 2 měsíci +1

      Me too. Did you find a solution?

  • @Ashish_Developer
    @Ashish_Developer Před rokem +1

    please make for next js also.

  • @abhisweb2315
    @abhisweb2315 Před 11 měsíci

    U have used tag but the text is showing that there is no tag is used 😢

    • @EtishaGarg
      @EtishaGarg  Před 11 měsíci

      Can you send the screenshot of the error at gargetisha@gmail.com?

    • @shreyasingh4680
      @shreyasingh4680 Před 10 měsíci

      it is because when you will check you tailwind.css file you will this which mean all heading tags are defined like this
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
      font-size: inherit;
      font-weight: inherit;
      }

  • @Sohrabziagoogle
    @Sohrabziagoogle Před rokem

    thanks for the video, if i have a javascript file in src folder how do i copy it along with css to public folder, i search online but no helpful solution yet, thanks
    update- found the solution just added && ./src/custom.js --output ./public/custom.js in build

  • @HamadKhan-ji9iv
    @HamadKhan-ji9iv Před 2 měsíci

    Thank you

  • @dhruvilchaudhary398
    @dhruvilchaudhary398 Před 4 měsíci

    style.css is not getting started stuck at rebuilding

  • @vishalkumarshaw9208
    @vishalkumarshaw9208 Před rokem

    Ma'am please make a video on how to do it in a react app with craco. I am not able to do it.
    My project has been stucked.

  • @SoumyaRanjan-bm9rj
    @SoumyaRanjan-bm9rj Před 3 měsíci

    Even i am not getting the 'warn' also

  • @TechEraExplorers
    @TechEraExplorers Před 6 měsíci

    Its more better to resize your face bcz its hide my half screen and I am not getting what you wrote in the build Thanks

  • @wardahshahid2758
    @wardahshahid2758 Před 4 měsíci

    Thankyou :)