How to Setup Tailwind CSS in VS Code?

  Рет қаралды 95,193

Etisha Garg

Etisha Garg

Күн бұрын

Пікірлер: 225
@EtishaGarg
@EtishaGarg Жыл бұрын
How to Setup Tailwind CSS in React JS? 🔗Video Link - kzbin.info/www/bejne/gmTae5hsa9mfeM0
@aluyaehis2061
@aluyaehis2061 9 ай бұрын
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 8 ай бұрын
@@aluyaehis2061 You probably didn't link the html to the css
@kelly_browning
@kelly_browning Жыл бұрын
BEST TUTORIAL on installing!! I've gone through 4 others and they made it so complicated. Well done!
@mr.yashff9625
@mr.yashff9625 8 ай бұрын
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 ...😊😊
@ashdevelope
@ashdevelope 11 ай бұрын
i literally watched 100s of videos today , none of them worked , lastly tried yours it worked finally , am so heppy thank u soooo much
@adammarley5616
@adammarley5616 10 ай бұрын
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
@EtishaGarg
@EtishaGarg 10 ай бұрын
Thanks Adam. Happy to know
@typowa615
@typowa615 Жыл бұрын
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 !!!
@melvinkwakuyawlui
@melvinkwakuyawlui Ай бұрын
After several attempts, this finally worked! Thanks alot
@ZaidhAbdulKather-4
@ZaidhAbdulKather-4 3 ай бұрын
I have no words to say because i have been wasting my time with other youtubers videos and couldn't find a way but at last came with your video and turned out Well 👌Thank you so much
@AbdulHadi-ek4lk
@AbdulHadi-ek4lk 4 ай бұрын
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
@devrishigupta6223
@devrishigupta6223 7 ай бұрын
how to fix the two warning that is shown " No utility classes were detected in your source files " Please help
@OriconYT
@OriconYT 20 күн бұрын
npx tailwindcss -i ./src/input.css -o ./public/style.css --watch try this
@SebooEdits
@SebooEdits Жыл бұрын
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
@EtishaGarg
@EtishaGarg Жыл бұрын
Glad it helped
@Orion599
@Orion599 5 ай бұрын
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
@HadiyaFarid-d6p
@HadiyaFarid-d6p 2 ай бұрын
I loved your video alot. Can you help me a bit? In the end When I clicked "open with live server" it is not showing the yellow background in microsoft edge.
@mohanapriya4708
@mohanapriya4708 26 күн бұрын
Thank god.. this worked. I spent 1hr and could not find why even the npm is not installing in mine.. already had a bad day and started to learn tailwind css and during the start itself this makes me cry
@davejones4740
@davejones4740 Жыл бұрын
Doesn't work as usual. Copied up until 04:17 exactly and errors as it doesn't creat the style sheet....
@EtishaGarg
@EtishaGarg Жыл бұрын
What is the error you're getting?
@nkansahchristodia
@nkansahchristodia 3 ай бұрын
Wow I've been able to install and configure it successfully. Thank so much Etisha. Very effective tutorial. And very inspiring for us ladies in tech
@rakshith7016
@rakshith7016 3 ай бұрын
Perfect explanation, kept it short and simple! Good one
@victorbabalola6094
@victorbabalola6094 6 ай бұрын
i have a problem, every time i try to change the background color it doesn't work or try to add a new style
@parasvishwakarma5395
@parasvishwakarma5395 3 ай бұрын
I am facing same problem but don't know the solution
@kobbyyy
@kobbyyy 2 ай бұрын
any progress?
@a1m4thah3d
@a1m4thah3d 8 ай бұрын
THANK you SO much for this video!!! I tried several other videos and could never get it but this one nailed it!
@abdulmujeebusman1645
@abdulmujeebusman1645 Жыл бұрын
I first tried to do the npm it was saying error then i downloaded node.js still not working 😢 please help
@yudhishthirsharma9083
@yudhishthirsharma9083 9 ай бұрын
Set the path in environment variables
@gauravsinghthakur259
@gauravsinghthakur259 9 ай бұрын
Bro when you type npm don’t give space between -y
@gursimransingh7018
@gursimransingh7018 8 ай бұрын
Use cdn option to use tailwind rather than installing
@skshaidhossain5460
@skshaidhossain5460 Жыл бұрын
yes i need the react installation with TailwindCSS. Thank you so much for this masterpiece 🙌
@RadwanRa
@RadwanRa 11 ай бұрын
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
@mdshuvo-gr7fw
@mdshuvo-gr7fw 9 ай бұрын
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 😀
@kylewhileyoung
@kylewhileyoung 4 ай бұрын
You are the best. everyone else talks about using it with Vite or react. I wondered this stand-alone use case
@ardielyn6319
@ardielyn6319 17 күн бұрын
Hi Etisha, when i initialize the command in my terminal it says ‘command not found’. I already downloaded node js. I don’t know what did i miss😢
@ManasTunga
@ManasTunga Жыл бұрын
Thanks for making things simple and easy to understand. Helped me to get started with tailwind
@ananyasingh2864
@ananyasingh2864 11 ай бұрын
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 11 ай бұрын
@@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.
@Zwei__
@Zwei__ 2 ай бұрын
Thank you much much, that was honestly so smooth
@abcxyz-b3h
@abcxyz-b3h 10 ай бұрын
Thank you for create sort and informative video.
@CraftAndCodee
@CraftAndCodee 27 күн бұрын
I have followed each step but the styles are not applying it is flushing out the margin and other things but the class I am giving it is not working can you help me with that please
@milankbudha
@milankbudha Жыл бұрын
thank u so much...i have watched other tutorials but not worked properly...Your tutorial saved my precious time
@abhishekprajapati5319
@abhishekprajapati5319 9 ай бұрын
very helpful thanks a lot
@AbhishekMad-jj6wh
@AbhishekMad-jj6wh 6 ай бұрын
did i have to repeat this process for every html file
@santhoshmadesh3027
@santhoshmadesh3027 Күн бұрын
Hi! thank you for the video! but can anyone help me understand why we need to convert the tailwind css to vanilla css for it to work? dont we just need tailwind css? so why not import it directly in the file below index.html.
@narendrakajla77
@narendrakajla77 Жыл бұрын
Thankyou so much ❤ very simple explanation and in depth step by step video. Thanks again, please keep making such amazing videos
@Anirban-fo9wi
@Anirban-fo9wi 4 ай бұрын
Ma'am for me output file style.css is blank ,how can I fixed it ??no tailwind default code are there.totally blank
@sunilchoudhary8216
@sunilchoudhary8216 4 ай бұрын
Hi unable to get update. every time click live server, when update the page
@Ashutosh07535
@Ashutosh07535 10 ай бұрын
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
@Anshydv3
@Anshydv3 Жыл бұрын
thank you so much di , i have watched many videos, but i was unable to install , but you nailed it 🥳
@abdulgaming5018
@abdulgaming5018 9 ай бұрын
iam doing everything right but still last mei bg color implement nia ho rha
@GodwinIfechukwu-hg1vn
@GodwinIfechukwu-hg1vn 3 ай бұрын
if it dont work just change the content: ["./public/**/*.{html,js}"]
@SoumyaRanjan-bm9rj
@SoumyaRanjan-bm9rj 7 ай бұрын
After excicuting the command properly in vs code still i am not getting the output.css file
@rishabhsharma4875
@rishabhsharma4875 8 ай бұрын
Hey, my npx tailwindcss init command doesn't work it show error, can you explain me what problem are in these command?
@anjanadewan144
@anjanadewan144 5 ай бұрын
why the changes are not reflecting in my browser..plzzz help
@abhisweb2315
@abhisweb2315 11 ай бұрын
Can u please tell me how should I build a package for deploying the project !!
@ashishkumarsharma9606
@ashishkumarsharma9606 Жыл бұрын
Please make separate videos for them it will really helpful to us ❤
@prabinchaudhary9691
@prabinchaudhary9691 Жыл бұрын
Tried many but this one worked so well..liked the way everything is explained 😊
@ananyasingh2864
@ananyasingh2864 11 ай бұрын
as the moment i start writing this npm -v it is showing error please help
@ananyasingh2864
@ananyasingh2864 11 ай бұрын
can anybody help...as the moment i start writing this npm -v it is showing error please help
@opyotusamuel
@opyotusamuel 10 ай бұрын
npm init -y not -v
@Procomicartist
@Procomicartist 7 ай бұрын
I tried with another video but didn't work can I delete the folder and start all over? Would it affects the next try?
@theproactivemindset
@theproactivemindset Жыл бұрын
What a great explanation! thank you Etisha!
@theCoder010
@theCoder010 Жыл бұрын
@x-bloof
@x-bloof 6 ай бұрын
Thank you so much Etisha ! the script was the missing part for me. Very neat tutorial.
@himanshuchaudhari9235
@himanshuchaudhari9235 11 ай бұрын
Thank you so much. I had spent whole day to figuring it out. But you saved me. 🤓
@ym1188
@ym1188 10 ай бұрын
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
@lualfemo
@lualfemo 10 ай бұрын
Thanks a lot for this video, you saved my life!!
@saikiran0311
@saikiran0311 6 ай бұрын
react vite is support for tailwind css or not
@irfanullah2910
@irfanullah2910 Жыл бұрын
Very interesting and helpful video, easy to understand and grape the concepts.
@nighthustler15
@nighthustler15 6 ай бұрын
That was a nice session!💯
@luciferneffex3457
@luciferneffex3457 Жыл бұрын
throw error; Cannot find module requireStack:[ ] Please help me out
@timbauer399
@timbauer399 5 ай бұрын
Amazing tutorial! Thanks for posting. 🙂
@Sohrabziagoogle
@Sohrabziagoogle Жыл бұрын
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
@TheGamerReacts
@TheGamerReacts Жыл бұрын
at @3:39 mine says unknown at rule @tailwind css(unknownAtRules) for all three of them
@EtishaGarg
@EtishaGarg Жыл бұрын
Ignore that issue. It won't make any difference. You would still be able to use Tailwind CSS after following these steps.
@TheGamerReacts
@TheGamerReacts Жыл бұрын
@EtishaGarg I switched to @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; And it works now, no issues
@Deferen
@Deferen Ай бұрын
Thank you so much this setup really worked
@imtisalmustafa3819
@imtisalmustafa3819 Жыл бұрын
Thank you very Much for this .. step by step proper guide
@ayushk.c8395
@ayushk.c8395 Жыл бұрын
--watch cannot be run in terminal ParserError: Line | 1 | --watch | ~ | Missing expression after unary operator '--'.
@RahulMistari-y4f
@RahulMistari-y4f 5 ай бұрын
How to Setup Tailwind CSS in angular v16?
@shubhammaurya3309
@shubhammaurya3309 9 ай бұрын
Thank you didi 🎉...
@SAMURAI232-u3q
@SAMURAI232-u3q 11 ай бұрын
how do you open the terminal ?????
@vishalkumarshaw9208
@vishalkumarshaw9208 Жыл бұрын
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.
@pri8112
@pri8112 6 ай бұрын
Thank you sm omg finally i am able to download this
@riazmoosani7725
@riazmoosani7725 10 ай бұрын
fantastic explanation. Thank you very much
@GulshanKumar-rm2fz
@GulshanKumar-rm2fz Жыл бұрын
npm err missing script is occuring what to do?
@luciferneffex3457
@luciferneffex3457 Жыл бұрын
Gone through with the same
@thippareddy6609
@thippareddy6609 Жыл бұрын
same here any solution??
@luciferneffex3457
@luciferneffex3457 Жыл бұрын
Bro path settup karo properly
@khushichudasama7468
@khushichudasama7468 Жыл бұрын
style.css file is not generating what to do ?
@parsamns6677
@parsamns6677 4 ай бұрын
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 4 ай бұрын
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch Run this command it will work
@shwetachoudhary9003
@shwetachoudhary9003 11 ай бұрын
thank you soo much i was suffering for this..
@aswinpk2426
@aswinpk2426 Жыл бұрын
It’s really helpful one … thank you so much ❤
@thippareddy6609
@thippareddy6609 Жыл бұрын
my body's color did not turn yellow what should i do? plz help
@elsoil3387
@elsoil3387 6 ай бұрын
Me too. Did you find a solution?
@SavyarHussein
@SavyarHussein 2 ай бұрын
Thank you so much you are the best 😭❤️
@ManikantaChikani
@ManikantaChikani Жыл бұрын
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.....
@EtishaGarg
@EtishaGarg Жыл бұрын
Glad it solved your problem
@AswinKumar-jo7kg
@AswinKumar-jo7kg 8 ай бұрын
great very best one on installing Tailwind CLI
@yetundequadri
@yetundequadri 23 күн бұрын
Thank you, ❤ I understood everything you did
@Master_oogway_loves-you
@Master_oogway_loves-you 7 ай бұрын
My 2 days of suffering is over now 😊 thanks ma'am
@localhost-v6
@localhost-v6 6 ай бұрын
Every time when i make a new project should i install and setup again and again ?
@abdikadirmohamed166
@abdikadirmohamed166 5 ай бұрын
I have same question lol
@SoumyaRanjan-bm9rj
@SoumyaRanjan-bm9rj 7 ай бұрын
Even i am not getting the 'warn' also
@abhisweb2315
@abhisweb2315 Жыл бұрын
U have used tag but the text is showing that there is no tag is used 😢
@EtishaGarg
@EtishaGarg Жыл бұрын
Can you send the screenshot of the error at gargetisha@gmail.com?
@shreyasingh4680
@shreyasingh4680 Жыл бұрын
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; }
@dhruvilchaudhary398
@dhruvilchaudhary398 8 ай бұрын
style.css is not getting started stuck at rebuilding
@funjon2746
@funjon2746 8 ай бұрын
This video was very important for me so thank you very much maym...🥰🥰🙂🙂 I am from bangladesh
@jeanjackson5000
@jeanjackson5000 Жыл бұрын
Please I tried every step and I got everything but my display on live server, the background isn't yellow I don't know why it's not working please any suggestions?
@EtishaGarg
@EtishaGarg Жыл бұрын
Is your script running in the background? Try npm run build on your terminal
@shreyasingh4680
@shreyasingh4680 Жыл бұрын
check you configuration file once the remove the curly brackets around html
@mtnllmtnll
@mtnllmtnll 8 ай бұрын
Thank you so much. I got this bc of you!
@contraspower6302
@contraspower6302 5 ай бұрын
Thanks alot very helpful best video🙏
@Amberccookie
@Amberccookie 2 ай бұрын
checked the new documentary of the tailwind CSS and now we use output.css as the new reference instead.
@laurajacobsen1131
@laurajacobsen1131 8 ай бұрын
Thank you. Great video :)
@pinkdonkey9325
@pinkdonkey9325 Жыл бұрын
I have done the installation as you showed in my project . I have a Question ? do i have to do installation again and again for different projects or we can directly use the classes in the html file
@EtishaGarg
@EtishaGarg Жыл бұрын
Yes generally you'll have to go through the entire process every time you create a new project. However, based on my understanding there are two workarounds: 1. You can create a github repo with installations steps done and clone it for any new project 2. You can create a npm package that automatically installs Tailwind CSS in a project.
@kingharji9170
@kingharji9170 3 ай бұрын
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).
@HadiyaFarid-d6p
@HadiyaFarid-d6p 2 ай бұрын
yes, that was with me too
@GregP22
@GregP22 Жыл бұрын
Why my style.css doesn't have any code line ?? 😢
@EtishaGarg
@EtishaGarg Жыл бұрын
You might would have given wrong tailwind css script. Re-check it once.
@sameerdevil8875
@sameerdevil8875 5 ай бұрын
It is simple and to the point ❤
@OmkarPatil-go4gn
@OmkarPatil-go4gn 3 ай бұрын
Thank You The Code Worked👍🏻
@29ibrahimsayed95
@29ibrahimsayed95 Жыл бұрын
Best one ever. Crystal clear.
@humanoidboyoo7610
@humanoidboyoo7610 Жыл бұрын
Mam mere mei to style.css ki file blank dikh rhi hai..😢😢
@dhruthiaddagatla2959
@dhruthiaddagatla2959 5 ай бұрын
Excellent explanation !!! Saved our lives, thanks a ton!! ❤
@himasheshu5548
@himasheshu5548 7 ай бұрын
Thank you madam . video was very helpfull 😁😇
@mukeshmanral1327
@mukeshmanral1327 2 ай бұрын
best video about tailwind css setup
@parico4489
@parico4489 9 ай бұрын
YOU ARE A LIFE SAVER THANK YOU
How to Set up Tailwind CSS Project for Beginners from Scratch
7:04
How to Setup Tailwind CSS in React JS?
5:03
Etisha Garg
Рет қаралды 75 М.
Мясо вегана? 🧐 @Whatthefshow
01:01
История одного вокалиста
Рет қаралды 7 МЛН
Don’t Choose The Wrong Box 😱
00:41
Topper Guild
Рет қаралды 62 МЛН
Tailwind CSS Tutorial for Beginners (2023)
45:19
Etisha Garg
Рет қаралды 13 М.
Tailwind CSS Tutorial #1 - Intro & Setup
13:41
Net Ninja
Рет қаралды 845 М.
Tailwind CSS Tutorial #5 - Tailwind Config
11:16
Net Ninja
Рет қаралды 182 М.
Watching Tailwind Tutorials Is A Waste Of Time
7:56
Web Dev Simplified
Рет қаралды 254 М.
Incredible scroll-based animations with CSS-only
32:23
Kevin Powell
Рет қаралды 494 М.
Learn TailwindCSS in 23 minutes
23:29
Smoljames
Рет қаралды 20 М.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 200 М.