I have watched many videos, but none of them explained it as perfectly, detailed, and cleanly as yours did. It also highlighted the differences between all the methods. Thank you very much for your informative content
From the bottom of my heart, I want to thank you. I spent weeks and months watching countless tutorials but was unable to comprehend it. You gave a thorough explanation. Boht Shukriya.....😃
Most videos on youttube that I've seen, are of people who explain this process with the assumption that everyone already knows what they are doing. You on the other hand have explained it as you would to a genuine beginner. This is the only video that has explained everything to me and actually worked. Other videos only show of how it works on their comps, but not on mine. Thank you so much for this. You are a life saver @Thirus. May God bless you abundantly. 🥰😊🙏
Thank you for the loveliest comment Mark! 😊 I faced similar troubles watching other UA-cam videos. That’s why I decided to create videos explaining the most basic stuff, keeping things really simple. Glad to hear that it’s helping. Will continue the same.
GREAT informative video. I like how you actually show where to put everything in the JSON packages and explain why. Many other tutorials rush through it thinking everyone knows how to do certain things.
Thank you so much for actually explaining and not rushing through. Watched several videos and yours is the only one i would recommend to anyone. This video one due to you actually explaining everything in detail for a beginner.
I really got the best tutorial video on tailwind CSS . Its 100% complete tutorial video. The way you explain its just the way as tailwind developer team member is explaining. Thank you very much. Awesome!
I've viewed four video courses, but I'm still unsure of everything. After seeing yours, which is simple but informative and easy to follow, everything is apparent. Awesome.
Wow. You're exceptional with the teaching and very explanatory. I've been battling with setting up tailwind until I watched this. Thank you very much. Awesome!
Thank you, Shruti. I tried many videos but they lack very basic knowledge. you cover every step with details. (although last postCSS one works a little differently n my case but again thanks ,I had so much insight with tailwind now.)
Thirus, I love you! I have been looking for 4 days, WHY I CAN'T USE TAILWIND !!! Thank you very much, I will share your video with my friends and my teacher NOW. Thank you very much ❤
Thanks a lot! I couldn't install this Framework, but finally I was able to watch your video. Apologies for my English, but I'm using Google Translate for you. Greetings from Argentina!
hi guys if you're installing via CLI your script to compile must be the following: npx tailwindcss-cli build -i ... -o .... --watch otherwise you will probably finished with only 424 lines on the css output.
I followed along eaxtly as you have demostrated. I can't get typography installed via the CLI . Can't find modules/tailwindcss/lib/cli.js Just under the Tailwing fold it shows a .vscode folder when i hit show live ?
hi, thank you for sharing , I was hoping if you could help solve a particular problem for me. npx tailwindcss init does not create the file on my project manually creating it doesn't seem to work as building the css output is empty after running the command. Been stuck here for weeks
Hi Thirus, great course again, recently I discover that NPM takes care of creating a environment variable in Windows just by adding the keyword "env" at the beginning. This is the only change I had to make. "scripts": { "dev": "env TAILWIND_MODE=watch postcss tailwind.css -o ./layouts/css/styles.css -w --verbose", "prod": "env NODE_ENV=production postcss tailwind.css -o ./layouts/css/styles.css --verbose" }, The VS Code extension "Live Server" works now, so I don't have to use a different web server.
I got this working slight different on windows without using cross-env (npm version 7.21.0) "scripts": { "dev": "postcss tailwind.css -o ./layouts/css/styles.css --watch --verbose", "prod": "postcss --env production tailwind.css -o ./layouts/css/styles.css --verbose" },
Thank you for your videos . They´re so helpful. It helped me to get back to tailwindcss. This time i only needed some minutes instead of one pair of hours
Nice video. I was trying the same configuration with React project but watch:css script was not working for tailwindcss class if added after running the script. So, I used concurrently package to get the changes reflected. Also, may I kindly know the name of screen recorder you are using to record your videos?
If you encounter issues with the production script using postcss on Windows, you can try the following solution (this is worked for me) : in postcss config file add trim() function : ...(process.env.NODE_ENV.trim() === "production" ? { cssnano: {} } : {}), in package.json remove space between NODE_ENV and "&&" : "scripts": { "prod": "SET NODE_ENV=production&& postcss src/input.css -o dist/styles/style.css", },
What extension or plugin are you using to split the class values onto individual lines? It's much easier to read it the way you have it, but I can't figure out what is doing it?
please kindly do complete css or tailwind css course or complete web development course for us in youtube or udemy because your way of explanation is very good.
Hi! I downloaded Tailwind through the CLI method. if I made another new project, do I have to install tailwind again in that folder? Or is there a way to add the existing one in? Sorry for the dumb question
Hello, I have watched the whole video till end I understand everything, like how to setup the environment which is good for the production purpose. But I'm faciing a issues idk wht I'm doing wrong Like it's not live reloading like I do it with plain css.. Live Server reload automatically.. But when I'm changing the class for example text-blue-300 to text-blue-800 then I have to manually reload the browser to see changes.. Idk if I explain my issues to you? Hope you reply..
I spend 2days for install tailwind using CLI, I did overthink what you share in this video but the plugins @tailwindcss/typography its not installed properly in my project. only 480 line off CSS are coming after run the every comment you show in this video.. I try it several times but I can't find any salutation ..
Hi Shruti, Thanks for this video. But please I have a little problem VS code keeps underlining everywhere I have tailwind on my code. It appears not to recognize it.
@@Thirus thanks so much. Started the whole process again and got it fixed. I think maybe a break in internet connection caused it. Thanks for all you do.
Hi good day upon trying your tutorial in postcss installation I encounter this message in my terminal 'TAILWIND_MODE' is not recognized as an internal or external command, operable program or batch file. and i don't know what to do next
i change my script to "build-css": "tailwindcss build -i ./input.css -o ./css/output.css --watch" and it did create this but checking the output.css theres no tailwind class there im really struggling installing tailwindcss using postcss :(
this warning "warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration."
Windows users also have to update the package.json file once the cross-env package has been installed: "scripts": { "dev": "cross-env TAILWIND_MODE=WATCH postcss ./src/main.css -o ./dist/styles.css --watch" }, At least that is what worked for me.
Thirus I really need your help and I hope you’d have time to reply this message My vs code isn’t showing the node modules file and after I type install -d tailwindcss it doesn’t show the complete message,stops at build deps and refuse to bring out the dependancies code . Please i need help
As soon as the Tailwind CSS v3 came out, I knew it: "Gotta wait Thirus make a video about it!!". Thanks for the amazing content!
Aww thank you! 😊
@@Thirus Your videos helped me to prototype a website for a school work, I'm so grateful
Awesome to know that!
I have watched many videos, but none of them explained it as perfectly, detailed, and cleanly as yours did. It also highlighted the differences between all the methods. Thank you very much for your informative content
Thank you Seghir!
From the bottom of my heart, I want to thank you. I spent weeks and months watching countless tutorials but was unable to comprehend it. You gave a thorough explanation. Boht Shukriya.....😃
Happy to hear that 😊
Most videos on youttube that I've seen, are of people who explain this process with the assumption that everyone already knows what they are doing. You on the other hand have explained it as you would to a genuine beginner. This is the only video that has explained everything to me and actually worked. Other videos only show of how it works on their comps, but not on mine. Thank you so much for this. You are a life saver @Thirus. May God bless you abundantly. 🥰😊🙏
Thank you for the loveliest comment Mark! 😊 I faced similar troubles watching other UA-cam videos. That’s why I decided to create videos explaining the most basic stuff, keeping things really simple.
Glad to hear that it’s helping. Will continue the same.
@@Thirus you are very welcome. Keep doing it. You're doing good
Amazing tutorial! I have spent all morning and day trying to add tailwind without CDN links lol. Thank you for this video Thirus!
I’m glad this video came at the right time for you :)
Thank you so much!!!! I am in tears! I spent more than a week to figure out the solution to my problem
I’m happy you were finally able to solve it :)
GREAT informative video. I like how you actually show where to put everything in the JSON packages and explain why. Many other tutorials rush through it thinking everyone knows how to do certain things.
Yes, I’ve been through that struggle myself. So, I don’t assume that people know any of that. I’m glad you liked the video :)
Thank you so much for actually explaining and not rushing through. Watched several videos and yours is the only one i would recommend to anyone. This video one due to you actually explaining everything in detail for a beginner.
Thank you for the lovely comment :) Happy to hear that.
I really got the best tutorial video on tailwind CSS . Its 100% complete tutorial video. The way you explain its just the way as tailwind developer team member is explaining. Thank you very much. Awesome!
Thank you for the lovely comment Shashi 😊 I’m so glad you liked it!
I've viewed four video courses, but I'm still unsure of everything. After seeing yours, which is simple but informative and easy to follow, everything is apparent. Awesome.
Very happy to hear that :) Stay tuned for more videos
Wow. You're exceptional with the teaching and very explanatory. I've been battling with setting up tailwind until I watched this. Thank you very much. Awesome!
That’s amazing! Thank you for the appreciation 😊
Hands down the best install tutorial I found. Thanks so much.
Thank you!!
agreed
Finally install tailwind css with an easy way. Thank You Shruti Mam.
Happy it helped 😊
Thank you, Shruti. I tried many videos but they lack very basic knowledge. you cover every step with details. (although last postCSS one works a little differently n my case but again thanks ,I had so much insight with tailwind now.)
Hey Ankit, thanks for the wonderful comment. I’m happy you found my video useful! 😊
Thirus, I love you! I have been looking for 4 days, WHY I CAN'T USE TAILWIND !!! Thank you very much, I will share your video with my friends and my teacher NOW. Thank you very much ❤
That’s awesome!! So happy that my video was helpful :)
wow thank you for the "hand holding" of how to get this up and running. youre a fantastic teacher!
Thank you 😊
Thanks Thirus, I was stuck in configuration you saved me...
Glad to hear that :) You’re welcome!
🇫🇷 Merci beaucoup pour ce tutoriel je vous regarde depuis le Cameroun 🇨🇲 / 🇬🇧 Thank you so much for this tutorial I watch you from Cameroon 🇨🇲
Glad to know that! 😊
thanks a lot for saving us this mess. i had issues installing tailwind v3 in a vue CLI project
I’m happy it helped :)
Fantastic tutorial. You are gifted instructor! Happily subscribed.
Thank you for the kind words 😊🙏
Great video! You should make a video explaining how to deploy to production using Tailwind CSS and post deployment maintenance.
Will consider that. Thank you
Thanks a lot! I couldn't install this Framework, but finally I was able to watch your video. Apologies for my English, but I'm using Google Translate for you. Greetings from Argentina!
No problem. I understood what you meant 😊 You’re welcome
hi guys if you're installing via CLI your script to compile must be the following:
npx tailwindcss-cli build -i ... -o .... --watch
otherwise you will probably finished with only 424 lines on the css output.
I've been having this problem all morning. Thank you!
Good content. It makes me more professional in TailwindCSS. Nice way of explanation. Easy to understand. Thanks. Subscribed
Thank you for an awesome comment :)
You just made my life better with this video . Thank you .
Amazing! :)
Very nice in-depth explanation! Thanks! 😉
You’re welcome :)
Thank you for all your helpful knowledge. My knowledge has expanded further.
Thank you for the kind comment :)
Great! Thank you. This helped me to install using only the binary, as I rather not use npm...
Glad it was helpful.
I followed along eaxtly as you have demostrated. I can't get typography installed via the CLI . Can't find modules/tailwindcss/lib/cli.js Just under the Tailwing fold it shows a .vscode folder when i hit show live ?
What’s your node version? And do share a screenshot of the error via DM on Twitter @shrutibalasa
one of the best video and explanation is really exceptional
Thank you very much!
really helpful . i was struggling from past 2 days . thanks a alot
Glad you found it helpful :)
hi, thank you for sharing , I was hoping if you could help solve a particular problem for me. npx tailwindcss init does not create the file on my project manually creating it doesn't seem to work as building the css output is empty after running the command. Been stuck here for weeks
DM on Twitter (@shrutibalasa). Send me the screenshot of your tailwind.config.js file
Hi Thirus, great course again, recently I discover that NPM takes care of creating a environment variable in Windows just by adding the keyword "env" at the beginning. This is the only change I had to make.
"scripts": {
"dev": "env TAILWIND_MODE=watch postcss tailwind.css -o ./layouts/css/styles.css -w --verbose",
"prod": "env NODE_ENV=production postcss tailwind.css -o ./layouts/css/styles.css --verbose"
},
The VS Code extension "Live Server" works now, so I don't have to use a different web server.
Oh is that so? That’s nice to hear. Any idea which version of NPM onwards?
@@Thirus I really don't know, I'm using version 8.1.0
I got this working slight different on windows without using cross-env (npm version 7.21.0)
"scripts": {
"dev": "postcss tailwind.css -o ./layouts/css/styles.css --watch --verbose",
"prod": "postcss --env production tailwind.css -o ./layouts/css/styles.css --verbose"
},
@@peterstab2 Looks like "TAILWIND_MODE=watch" is not longer required and "--env production" works fine for cssnano .. Thanks for the info.
Thank you for your videos . They´re so helpful. It helped me to get back to tailwindcss. This time i only needed some minutes instead of one pair of hours
That’s really nice! You’re welcome :)
Nice video. I was trying the same configuration with React project but watch:css script was not working for tailwindcss class if added after running the script. So, I used concurrently package to get the changes reflected. Also, may I kindly know the name of screen recorder you are using to record your videos?
Thank you. I’ve used QuickTime on Mac for this video and edited using iMovie
@@Thirus Thanks for your kind response in this.
I learned a lot & thanks for your effort to made this video...
Happy to hear that 😊
Hi,Thanks for the video 🙏,what was the node version that you were using?
Hi, can’t recall. Must be the latest version at that time.
Ohh my god this the easiest thing i'd ever seen. Supperb work this is help me a lot, Thank You! ❤️
Awesome! You’re welcome :)
If you encounter issues with the production script using postcss on Windows, you can try the following solution (this is worked for me) :
in postcss config file add trim() function :
...(process.env.NODE_ENV.trim() === "production" ? { cssnano: {} } : {}),
in package.json remove space between NODE_ENV and "&&" :
"scripts": {
"prod": "SET NODE_ENV=production&& postcss src/input.css -o dist/styles/style.css",
},
A really useful tutorial, thank you.
You’re welcome! :)
What extension or plugin are you using to split the class values onto individual lines? It's much easier to read it the way you have it, but I can't figure out what is doing it?
I’m just using Prettier. And in VS code, I’ve set the code to wrap and chosen a very short “line length” - I guess just around 80 characters.
Extremely informative, thank you very much!
You’re welcome!
Great! Great lesson, really enjoyed it!
Thank you!
please kindly do complete css or tailwind css course or complete web development course for us in youtube or udemy because your way of explanation is very good.
I wish to do that but really pressed for time. Hopefully next year.
@@Thirus waiting..❤️🤩
This video is really informative mam. Thank you so much.
You’re welcome :)
prefect video for newbee. Love it！
Thank you 😊
Thank you very much for the video it helped me a lot I subscribed and I learn with you.
Thank you!
Just a quick, thank you!
You’re welcome :)
Awesome. Clear and concise! Thank you!
You’re welcome!
can we host our static HTML + Tailwind Css website on any Shared Hosting ????????
Yes, absolutely
@@Thirus but not with CDN link , I wanna go with full package, is it possible ?
Hi! I downloaded Tailwind through the CLI method. if I made another new project, do I have to install tailwind again in that folder? Or is there a way to add the existing one in? Sorry for the dumb question
Hi, you have to install again in every new project. There’s no global installation. And it’s not a dumb question :)
@@Thirus Oh thank you so much! Your video's really helpful.
Madam sir, madam anthe. thanks for the solution, was crying for help, found your vid. Thanks a lot 💖💖💖💖💖💖💖💖💖💖
You’re welcome
Please reply me😢
If just add the tailwind CSS in CDN way on my head html code that's enough!? We don't need anything more??
That’s only for temporary development. It works, but CDN should NOT be used for production.
OMG thank you so much for this tutorial!!! 🙏
Glad it helped :)
Great Video! Can you tell me please which Theme and Font are you using in VS Code? Your Vs Code is looking so beautiful.
Wow - you explain it very good.
Could you also make a tutorial how delete the comments of the compiled css of tailwind?
Do those comments exist when you use cssnano to minify?
Thank you very much for the excellent video.
You’re welcome 😊
Hello, I have watched the whole video till end I understand everything, like how to setup the environment which is good for the production purpose.
But I'm faciing a issues idk wht I'm doing wrong
Like it's not live reloading like I do it with plain css..
Live Server reload automatically.. But when I'm changing the class for example text-blue-300 to text-blue-800 then I have to manually reload the browser to see changes.. Idk if I explain my issues to you? Hope you reply..
Send a DM on Twitter.
@@Thirus can you please see your Twitter I have dm you.
I spend 2days for install tailwind using CLI, I did overthink what you share in this video but the plugins @tailwindcss/typography its not installed properly in my project. only 480 line off CSS are coming after run the every comment you show in this video.. I try it several times but I can't find any salutation ..
DM on Twitter
Hi Shruti, Thanks for this video. But please I have a little problem VS code keeps underlining everywhere I have tailwind on my code. It appears not to recognize it.
Please send a screenshot on Twitter
Could you also make a Flowbite Installation tutorial? This tutorial was perfect!
Did you try installing flowbite and face any issue?
I also noticed that you did not bother about the problems identified on your terminal. Is that okay to ignore? Thanks.
Very helpful video tutorial thank you very much
You’re welcome :)
A beautiful and well explained tutorial ! What is your VSCode theme please ? 💅 Look like Cobalt but not sure
It’s Night Owl
Perfect video thank you.
You’re welcome :)
Fantastic Tutorial, thank you!
You’re welcome!
My output couldn't load for the CLI build process.
Any help?
DM me on Twitter @shrutibalasa with error screenshots
@@Thirus thanks so much. Started the whole process again and got it fixed. I think maybe a break in internet connection caused it.
Thanks for all you do.
You are a magician, after watching tons of garbage, found you🙏
😊🙏
Absolutely beast 💪
Yay 💪
Thanks for your contributions
You’re welcome!
Seeing after long time 👍👍
Yea, it’s been 3 months!
brilliant, thanx so much!
You’re welcome!
Thanks a lot. It is very good infomation🎉🎉🎉🎉
You’re welcome 😊
hi what extensions are you using thx in advance
Tailwind Intellisense plugin for auto completion.
no mam last one the postcss is not working plz in window
what have you done plz elaborate once more
Great video,i have installed Tailwind thought css-classes arent working at all. Tried also apache server with the same result.Any idea?
Can you DM on Twitter with few more details on how you installed Tailwind? Screenshots will help too
Hi good day upon trying your tutorial in postcss installation I encounter this message in my terminal 'TAILWIND_MODE' is not recognized as an internal or external command,
operable program or batch file. and i don't know what to do next
i change my script to "build-css": "tailwindcss build -i ./input.css -o ./css/output.css --watch" and it did create this but checking the output.css theres no tailwind class there im really struggling installing tailwindcss using postcss :(
this warning "warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration."
If you’re using windows, install another package
npm install cross-env
Then it’ll work
I will need to look into your files and folder structure and your config file to figure out what’s wrong. DM @shrutibalasa on Twitter with screenshots
Windows users also have to update the package.json file once the cross-env package has been installed:
"scripts": {
"dev": "cross-env TAILWIND_MODE=WATCH postcss ./src/main.css -o ./dist/styles.css --watch"
},
At least that is what worked for me.
You are genuiely ammmaaazing 😊😊
Thank you 😊
Why TAILWIND_MODE=WATCH doesn't work?
Please send me a screenshot of the error on Twitter - @shrutibalasa
ma'am which syntax highlight you are using and for mating.
??
I’m just using Prettier
The best tutorial!
I’m glad it helped :)
I'm getting error NODE_ENV is not recognized as internal or external command
You must be using windows. Did you install crossenv package?
@@Thirus yes I'll try it
@@Thirus I did but still not working even TAILWIND_MODE = WATCH not working as well tailwind CLI not working at all
Send a DM on Twitter to @shrutibalasa with screenshots of the error
@@Thirus you've resolved the problem thanks so much for taking your time to help me you are the best.
Thirus I really need your help and I hope you’d have time to reply this message
My vs code isn’t showing the node modules file and after I type install -d tailwindcss it doesn’t show the complete message,stops at build deps and refuse to bring out the dependancies code . Please i need help
I would need a screenshot or a video. Send a DM on Twitter
Thank you ma'am for this
You’re welcome :)
Superb content
Thank you!
Wonderful yrr.. thank u so much!!!
You’re welcome 😊
Would you have to pay for this Tailwind in the future?
No, Tailwind CSS framework is free forever. They have ready made components called Tailwind UI - which is paid
Great tutorial thanks. You've got yourselve a new sub 👏
Awesome!
amazing this tutorial is super great and helpful too.
Thank you :)
Very informative tutorial. CDN JIT is amazing for those lazy to do nodejs stuff. Real world project using tailwind v3.0 on your next video?
Yes, it’s coming soon. Building a Wordle clone with Tailwind and VueJS.
@@Thirus great! looking forward to it!
Awesome video loved it and thank you very much ma'am♥♥♥🙏
You’re welcome 😊
great video, thanks
You’re welcome!
Awesome!! Thanks. :)
You’re welcome! :)
Muchas gracias!!! realmente me ayudaste.
how to stop the process 21:39 I don't know how to stopped
Thank you very much!
You’re welcome!
Great work
Thank you!
thank you Thirus!
You’re welcome!
thank you thank you thank you!!!
You’re welcome! 😊
Can you code a new project using Tailwind 3?
You mean you want me to create a video showing the creation of a new project?
@@Thirus yes