How to Set up Tailwind CSS Project for Beginners from Scratch
HTML-код
- Опубликовано: 1 окт 2024
- In this video, I'm going to teach how to install Tailwind CSS and set up a Tailwind project for learning. Tailwind CLI will be used to set up a Tailwind Project easily.
Resource
- Finished Files on GitHub - github.com/phi...
Normally I don't comment on videos like this but let me say getting tailwind to run is the hardest part about it. I've watched many videos and none of them worked until I stumbled upon this video.
You've explained the process so easily and everything works perfectly. Thank you, sincerely.
You're welcome. I appreciate your comment.
exactly!
GOD BLESS YOU IN JESUS NAME AMEN..... IT WORKED PERFECTLY .... 🤭🤭🤭🤭🤗🤗🤗
happy to hear it
I have to say this was the best video when it comes to setting up Tailwind! Clear instructions and straight to the point! Thanks a lot!
You're welcome. Please, subscribe
Thanks. If someone has problems with the input.css (recognize problems), you need to install the extension "PostCSS Language Support" and will be fixed
Thank you for sharing
This was exactly what I was looking for, you have saved me from mindlessly scrolling through youtube to find answers
You're welcome. Please, subscribe
Lol normally if someone asks for Tailwind it's because they already have VSCode often the guys like to lengthen the videos so much instead of getting to the heart of the matter
Thank you for a comment
how do you have does icons at the side like for tailwind and dist folder have their own icon
I think I've install Material Icon Theme
tfw you follow the tutorial and get 3 errors on your source file with it not working
Really
Did everythung sameway stil no work
hey man, it's all clear but my output.css file is empty.. i'm trying to apply tailwind to my project, suggest?
You need to run the compiled command every time, you make changes
thanks. appreciate
@@Devtamin
My VS Code is showing a problem. It says "Unknown Rule at @tailwind", which happened as I pasted it on input.css file, am I missing something?
Edit: Nevermind, I learned that css kinda conflicts with tailwind on vs code, so I had to put this in the settings.json. Hope it helps someone lol.
{
"css.validate": false,
"scss.validate": false,
"less.validate": false
}
can you explain this more specifically. coz i am also facing the same damn problem. where to find this settings.json to paste the following lines of code you just gave??
simple, effective, straight to the point in only 7 Minute. Excellent. Well done my friend👏🏾👏🏾
Thank you for a comment
thanks sir!
we would not know anything if your video didn't exist
You're welcome
I agree that by far this tutorial is the first one I followed and worked so I never make any comment except this one as it help me to run my firs tailwind . Thanks for the lecture please keep doing what you doing it will make the world better place for helping developers who stuck .
I’ve been battling with this thing since, followed all the processes and it still doesn’t work
Sorry to hear it
An informative video! I learned a lot because you get to the point; no long-winded explanations. Well done. Thank you.
Glad it was helpful! I really appreciate your comment. Please, subscribe
When I type"node -v"on the terminal, I get an error what do I do? Pls help @Devtamin
Do I need to do this for every project I make? Or do I just need to link to the given path?
good question, i want to know the answer too
When opened with Live Server the text appears but it doesn't add background color.
I managed to solve the 3 problems in the input.css by creating a .vscode/setting.json and adding the code I saw on stack overflow now there are 3 problems in the output.css file concerning -webkit-appearance: button, -webkit-appearance: text field and Vertical-align: middle (concerning img, SVG, video etc). The tailwind icon appears on both input and output.css file. How do I solve these problems
Same here, looked all over on google but couldn't find anything that worked. Do let me know if you find a solution!
@@midvoiceimpressions run this instead of the code given in 3:27 "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch" this will create the output.css in ur dist folder and it will run normally and the bg color and everything will be solved i hope this helps
thanks , I got some error , and package.json that I have doesn't have same details as yours , I don't know why
but great to start as beginner
That's wired. Maybe you should try again
Woow it is so much helpfulll
Greate to hear it
Why this is not working with .php files ? I'm making a project using php for back-end and I want to use tailwind but it's not working
let's try to put .php in content in the tailwind.config.js
@@Devtamin already did that, still facing same issue. Actually it's not like nothing is working. Let's say if I write bg-green-500 it works fine but when I change it to bg-red-500 it stops working. And this is happening to each property some are working while other are not working
if im opening this in a project i currently have, do se it matter what file i put this in or should it be root one of project.and it should work for all my html files in there folders? I havent tried it yet, thanks in advanced
Watch the video
i followed the instruction, still Tailwind is not working. it is just not reflecting any style at all. please help me 🙏
Let's try this one ruclips.net/video/c0UnSx06BCU/видео.html
Do I have to do this every time I want to work on a project when I want to use tailwind. Also I keep getting the unknown at rule and the bg-red doesn’t work sigh
Yes, you have to or you can save it on GitHub and clone it when you want to create a new project
sir, I have learned Html, Css , Javascript and basics of React from you and Docs, Git/Github, And Tailwind from you, Can I get a basic Job and learn my programming journey . Any suggestion sir....💻🖥🖥💻🖥
I'm not sure if you are ready for a job because it depends on your employer. I recommend that you have some projects in your resume. HR or developers will be interested in you if you have something to show them.
@@Devtamin thanks for the guide. sir
First it was indian guy now its "THE CHINESE GUY"
Sorry! I'm not Chinses.
Not one video on youtube works. Followed exactly even when you said nothing about the slight change you did in termainal changing the output..
I want to create another project, what should I do? Where do I start and how do I copy files and things?
You can do it again or upload it to GitHub and clone it whenever you want to create a new project
It did not working
Is this process repeated from scratch when I'm working on new folder or not😢
Yes. or you can put it on GitHub and clone it whenever you want to use it
Really Helping Video brother.... Good job ♥️♥️
Glad to hear that !! Please, subscribe
using only cdn link can we get suggestion please clarify
the suggestion does not work with cdn
Genuinely couldn't get tailwind to output until I watched this video.
Thank you for a comment
It doesn't work, I tried so many times! I hope to get this right.....
Sorry to hear that
bro where were you when I've been struggling for days !! thanx a lot man
Any time
Thank you, i did it following other video and doesn't work, I see your video then I realized that my mystake was
npx tailwindcss -i ./src/Styles.css -o ./Public/final.css --watch
I think I had it upside down at first and that's why it didn't work for me. It was thanks to your video that I realized
Glad it helped
Straight to the point. Thank you so much!
You're welcome! I really appreciate your comment. Pls, subscribe
I have to press Ctrl+S everytime to reflect changes in browser, even after starting it as "live Server". idk why it's happening.
When you save the file, the file will be recompiled and reloaded
@@Devtamin is there any way where I don't have to save file everytime, just do the changes, and it will reflect in browser?
I like your videos. They straight forward, well-explained, and concise. I'll suggest that you create complete online courses (if you haven't done so already). That will help a lot of people.
Thank you for suggestion !! I do have a video tutorial about Tailwind. Please, check it out ruclips.net/video/yWCMI3dsSog/видео.html
can we name the script with any other name? Or it Must be "dev"
You can name it whatever
can you explain why it needs two css? the inpus.css from src and the style.css from dist
whenever you want to add or edit css, you edit it via input.css. the style.css is the compiled css that you upload it to the server along with index.html. the style.css is the compiled css of input.css
@@Devtamin thanks! aylabyu
Hello my fellow people of the internet. So ive been trying to learn how to install tailwind this way for months. This mans video was the best one. Now if your like me a lot of these tutorial videos tell you to download node js. When i tried this the first time it didn't work that's because on my mac Os , i had an outdated version . So the fix was me downloading a previous version of node js that was compatiable with my OS at the time. then node js was able to be installed via terminal. Hope this helps. !!!!! - Z
Thank you for sharing. I hope it helps other people.
Thank you so much for this video! It's surprisingly difficult to integrate tailwind with basic html code. I watched so many videos on youtube and only this was able to help me out. I'm so happy, been trying to solve it for days now. You went over everything in detail and it was so helpful, thanks again!
my intellisense is not working, i did everything you said prior to that
I'm not sure what the problem is if you follow me step by step. You might try to uninstall it and install it again. Please, subscribe
Thank you this video was very helpful
Glad it was helpful!
thankyu i had a hard problem because i dont understand at all the page say
Glad it was helpful !! Please, subscribe
I have a rails app with rails 7 esbuild. I nitialized it with --css tailwind but some of my default classes are not working!. What could be the reason
I did not understand why we need to. Stop it by typing ctrl+c
it’s just a shortcut key for sending the interrupt (terminate) signal SIGINT to the current process running in the foreground. Once the process gets that signal, it’s terminating itself and returns the user to the shell prompt. Please, subscribe
hey man, thanks for the tutorial on how to install I was struggling to establish and 1question do need to same process every time if I create a new file or folder?
Not really, you can save the fresh installation tailwind project in GitHub. Then, you just clone the project when you want to create a new project
@@Devtamin thanks
i can't run the script npm run dev and it show error in the "dev" ?
i am not sure what happened. You may try to set it up again.
This video really works for me Helpful
Glad to hear that !
thanks bro from Bangladesh ❤❤❤❤❤❤
You're welcome
Amazing. Thank you so much!
You're very welcome!
Ezzzz as f*** to understand thanks blud!!!
You're welcome
I hav a question brother can I start my side hustle with html, css and using tailwindcss and little bit of javascript🕵🕵♂🕵♂
The question is why not???
@@samialvi4226 thank you so much brother 🙏👍
@@Web-Himansu Sure, never doubt your abilities cuz, "It's your attitude, not your aptitude that will determine your altitude"
Man please After running live server i didn't see any compile command please what do I do?
Thank you man.This is exactly what I was looking for. Now I can utilize Tailwind Css without any problems. Thanks Again. You Have earned New Subscriber.
such a nice video so helpfull..thanks
So nice of you
SUPERB tutorial, same experience here with others, all other videos are too wordy and worst doesn't work, your video is simple and straighforward
my system is telling me unknown at rule @tailwind
sorry to hear that
Do a shout out in your next upload hehehehe big fan here
coming
Best video thank you it helped a lot
Glad it helped
Thanks for this precise and great content
Glad it was helpful!
bro there is an 3 problems to my input.css
but its still works.
is it not a problem to my future project?
Thank you. Well-explained.
You're welcome!
When opened with Live Server the text appears but it doesn't add background color.
I managed to solve the 3 problems in the input.css by creating a .vscode/setting.json and adding the code I saw on stack overflow now there are 3 problems in the output.css file concerning -webkit-appearance: button, -webkit-appearance: text field and Vertical-align: middle (concerning img, SVG, video etc). The tailwind icon appears on both input and output.css file. How do I solve these problems?
Hello, thanks for your help but after following the steps, my output.css is still on rebuilding,thus am not get the output
When you save it, it should build you an output file
Ok
Thanks
npm run dev command is not working..
Please try again. You might skip some steps.
if the html file is in other folder will tailwind work by injecting that "npm run dev" in that html file ?
Or i have do the same process in every folder ?
You sir! makes the installation of Tailwind easy. Arigthanks goSomuch!
Happy to help
Brother....
You're awesome 💯💯💯💯
Thanks ✌️
When i changing in the html file no updation of tailwindcss is showing or happening , why ?
You might forget something, Pls, try it again.
@@Devtamin yeah now its working
The only thing that tripped me up was on Step 4. In the video, the code works fine, but at the time of my writing, the current Tailwind website creates the output css file in the "src" folder instead of the "dist" folder. Watch out for the following: "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
Is every time create a new file with vs code is every time doing these step to run tailwindcss 😭😭😭😭😭😢😢😢😢
Yes, it is how to set up tailwind or you can save the project on GitHub and clone it every time that you want to set up a new project. Pls, subscribe
@@Devtamin I subscribed your channel for better learning & growth..
@@Web-Himansu I appreciate it
do i need to do this for each project i make?
Yes, or you can upload it to GitHub and clone it whenever you want to create a new project
thx bro i was stuck without know how to install lol
You're welcome !! Please, subscribe
You're awesome. Thank you!
You're welcome!
thanks for your great video
You are welcome!
why would you put index.html ins dist folder?
Also I kept my index.html in the public folder, and changes "src" to "public" in the tailwind config file. However after following along, the color of my hello is still black
Why do I need a node. Js to use tailwind css
We use Node to download a Tailwind package and compile it. If you don't want to use Node, you can use CDN
For me the output.css goes automatically to the src folder so the styles are not applied. How do i solve this?
When you run a command to compile tailwind, you can choose the output path
@@Devtamin Thanks that answer helped me immensely, I can now start using tailwind thanks to you. Subscribed
@@DevtaminThanks for the reply
god bless you . thaaank you!
Welcome
thank you the video is helpfull
You're welcome!
Good video. But I didn't understand the part at the end about the host like at 6:50
Thanks so much, helps me a lot !
Glad it helped!
Does it need internet to run all the time?
No, you just need the internet when you install or set up a project
Great explanation Sir , merci
Thank you
Thank You So Much My Brother
Always welcome
I did all this and the 'node_modules' folder was not created in my workspace, and I don't have those json files in the workspace either. Any advice would be nice thanks friends
How to deploy it on vercel
Thank you for the idea. I'll do video about it. Please, subscribe
Thank u so much ❤️
You're welcome 😊
I was looking forward to using Tailwind.but the installation seemed so exhausting that I didn't feel like it anymore hahahaha fuck that sht
May I know which key to press inorder to stop the service?
Ctrl + C
@@Devtamin Thank you :D
Thanks a lot for your video. I have watched a lot of videos but none of them worked for me. I really like how you took your time in teaching the setup. I have been trying to run tailwind for days. Thanks a lot, I'm glad I chanced on your video.
Thank you
Thanks you have made it so easy
You're welcome 😊
what's the difference between installing it and just putting a link href above the head of html?
Im getting prblm after i pasted @tailwind directives to the input. Css. Wt to do now??
how to config tailwindcss?
follow the video
Thanks alot bro. I watched some Indians videos. I followed them from start till end but in there system it was working completely fine but in my PC it didn't.
Your tutorial was amazing and simple and solved my problem. THANKS AGAIN.
Glad I could help
Good one bro thanks so much
Any time