Does it covers everything,i mean i watched 4 hours css and build simple projects,still find something missing so i went to free code camp and learning their 6hours course,,,, so if it has all or you had other suggestions Pls rely bro
@@avtar2565 css is always first, try learning through Mozilla developer for everything. Tutorials generally cover enough basics to get you going and learn on your own.
@@animeprogrammer bro i just finished to grid box and flex box , now from tomorrow I will start advance like animation and other stuff, although i practiced every module, the execution of full web is bit touch i mean it will take time to think like developer how to use each and every part
I am actually working with tailwind at work and other than Brad's, I couldn't really find a good tutorial. So glad that you are making one! You pumping out content like a boss
I updated the installation instructions as of 7/20/22: Follow the video until 6:43, then run the following in the terminal: npm install -D tailwindcss npx tailwindcss init Open the 'tailwind.config.js' file you just created and edit 'content' so that the file reads: module.exports = { content: ["./public/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } Save the file. Skip to 7:45 and copy and paste the @tailwind code as directed. When the video gets to 10:32, delete the initial script as instructed, but add the following script instead: "build-css": "npx tailwindcss -i src/styles.css -o public/styles.css" Continue to follow along with the video. Hope that helps!
@@darhvid create a folder inside your current folder (where you're working right now) and name it "src". inside that folder, create a file named "styles.css"
🎯 Key Takeaways for quick navigation: 00:00 🌟 *Introduction to Tailwind CSS Tutorial* - Introduction to the Tailwind CSS tutorial series. - Mention of channel support options and tutorial structure. 00:43 📚 *Explanation of Tailwind CSS* - Description of Tailwind CSS as a utility-first framework. - Comparison with other CSS frameworks like Bootstrap and Materialize. 01:25 🛠️ *Building Components with Tailwind* - How to build custom components using Tailwind's utility classes. - Flexibility and uniqueness in design compared to other frameworks. 02:21 🖥️ *Practical Application of Tailwind* - Tailwind's application in building a simple web page. - Overview of the tutorial's focus areas like typography, spacing, and responsive design. 03:20 💡 *Prerequisites for Learning Tailwind* - Necessary knowledge of HTML and CSS before starting Tailwind. - Reference to additional resources for learning HTML and CSS. 03:48 ⚙️ *Setting Up Tailwind via NPM* - Installing Tailwind using Node Package Manager (NPM). - Requirements for installation including Node.js. 05:28 🖋️ *Initializing the Project with VS Code* - Starting a new project and setting up directories for Tailwind. - Use of Visual Studio Code as the recommended text editor. 06:24 📝 *Creating and Building the CSS File* - Steps to create and build the CSS file using Tailwind. - Importance of package.json in tracking dependencies. 07:20 🎨 *Understanding Tailwind's Workflow* - Explanation of Tailwind's processing of source and output files. - Emphasis on the use of utility classes in HTML. 08:45 📁 *Organizing Source and Public Folders* - Creating and organizing source and public folders in the project. - Description of the purpose of each folder. 10:07 🔄 *Processing Tailwind CSS File* - Process of transforming the source CSS file into an output file. - Setting up build scripts in package.json for Tailwind. 12:26 🖥 *Starting HTML Page Creation* - Transition to creating the HTML page in the next tutorial. - Brief overview of the HTML page setup process. 12:52 🌐 *Accessing Course Files and GitHub Repo* - Availability of course files for each tutorial lesson on GitHub. - Instructions on how to access specific lesson files on GitHub. Made with HARPA AI
@tailwind base; @tailwind components; @tailwind utilities; This is giving me error and my style.css file inside public folder is also empty after building and compiling the styles. css file in sec folder
So I just heard about Tailwind five days ago, started my learning two days ago, and was pleasantly surprised to find out you're still making a series of tuts videos on it. I hate to imagine how learning Tailwind would have been without you. Thank you, Shaun. Keep up the good work, you're much appreciated!
I have been racking my brain trying to understand tailwinds responsive classes. Thanks to you and your teaching style I have a better grasp with it now. I appreciate your contribution to the dev community and I'm happy you take the time to make us all better at what we do. 🙏
I am completely new in tailwind. I have just completed this whole series and now I am feeling super confident about using it in projects. Thanks a lot, man ❤
@@mikkun_ there are a number of people on the third video stating nothing is working, so I doubt that. Literally none of the styles were working, so why don’t you go ahead and do it and tell me how and where you got stuck without the styles.
@itsnobledean9450 Everything works as is. I just tried it. If the styles doesn't work, maybe because you haven't built your css. In the first video, you have setup a script which you can run using "npm run build-css" or much better as stated in the latest docs installation "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch. The --watch flag basically builds the css every time there is a change. Correct me if I don't understand your problem.
@itsnobledean9450 I also saw your other comments. Please do note that you shouldn't fully rely on these videos as these are not always the updated version. These are years ago. Better read the docs. Everything is listed there, along with the template. You just need to search (literally). If you want the font weight, then search it. It'll show you the template font-{weight}
Tailwind is one of those frameworks I've been hearing about for some time but have never had the chance to play around with it. This will be interesting.
I was surfing the you tube searching for a good tailwind CSS tutorial and guess what? I ended up with the channel who already made my flutter journey memorable and easy. Thanks bro ! Even though this playlist is 3 years old, I like to watch if it's yours.
My french teacher recommended us a video that was long and complicated (the youtuber prob assumed everyone knew basic steps so he either skipped them or didnt even mention them). Luckily, I m fluent in english so I foudn your channel and Hope has started brighting in my heart since. Thank you for your work, you are making a difference in people' careers
You're no super ninja. You are SENSEI. Thank you so much for empowering us with these ninja skills. Your delivery is stellar , you make things easy to understand. Thank you Shaun!
Hi Ninja, thank you for this highly informative and perfect step-by-step setup tutorial. Honestly, I've watched at least 10 different setup tutorials, but none clicked until I checked yours. Precise and clear explanation. Thanks again!
Thanks for the Tutorial series! I had to install autoprefixer and postcss manually to get it to work. npm install tailwindcss + npm install autoprefixer + npm install postcss
I wonder what you are eating these days Can't believe tutorial after tutorial for free Keep up the hard work but have rest Looking forward to an updated Vue.js course from you
Guys!! just go to tailwind docs and follow the installation process and then start on with the series because it's still super relevant in terms of CSS concepts and techniques! Not outdated at all like others say.
@@NetNinja just finished css, and I am new to frameworks especially Tailwind I have some concerns. 1.Do I need to download the depencies for every project on my local machine? or I can just copy the sytles.css with the dependecies to the new project folder. 2. What if I need to separate my Tailwind just like my normal css?
Was searching TH-cam for a good Tailwind tutorial, when suddenly a wild ninja appeared and helped me! Thanks man, that's a great job you are doing here! Keep on the amazing stuff, you're a great teacher! :D
7:50 For development purposes, you can simply use tailwind CDN in the html. There is no need to compile and do all these steps. Of course these are needed for production deployment, but if someone wants to learn tailwind fast, better to just use CDN.
Sensei, I love your content more than I can express to you. I mean I just get a series for whatever I want on your channel. I just love it. Thank you so so much for making my coding journey and experience so awesome !!!
The latest documentation says to install tailwindcss@latest postcss@latest autoprefixer@latest as developement dependencies, not just tailwind. It also requires a PostCSS config with tailwind and autoprefixer plugins. If you are having issues, go read the documentation. It is very well made
Thank you. The subject matter is very well organized and comprehensive. However, what makes this tutorial so fantastic are 1) "Net Nija's" positive and energetic personality combined with 2) His solid pedagogy skills. Great job.
0:08 support channel (plz) 0:38 What is Tailwind CSS? 2:26 design simple web page 3:05 You Should Know 4:10 Download Node 4:57 create a project 6:15 create a new package 6:43 npm install tailwind CSS 7:45 How Tailwind Works 9:44 Add the Tailwind directives to your CSS 10:16 register certain script
For anyone else stuck going back to this and the "Fonts & Colors" video: Use the "--watch" at the end of the "build-css" script in "package.json" this will allow you to not have to run the "build-css" script in NPM everytime you want to make a change: Update in package.json under "scripts": "build-css": "tailwindcss build -i src/styles.css -o public/styles.css --watch"
Tailwind has updated their build script. Just change the package.json script to: "build-css": "tailwindcss -i src/styles.css -o public/styles.css --watch" --watch will auto-detect changes and rebuild the css.
Great! I was waiting for this. Thanks man. By the way can you update the React js series? You work really hard i don't want to request you but i only follow you mostly. You are the best teacher for me. Much love and appreciation ❣️
I love how this dude teaches like it's everyone's first time programming.
He's personally my favorite instructor. I said it in this video.
th-cam.com/video/DgGPrnN2Q2c/w-d-xo.html
It’s definitely needed and appreciated. It also makes me feel like he knows what he is talking about.
Just completed the whole series, and I recommend whoever is starting right now to complete it. Thanks Shaun for taking time to make it happen!
Does it covers everything,i mean i watched 4 hours css and build simple projects,still find something missing so i went to free code camp and learning their 6hours course,,,, so if it has all or you had other suggestions
Pls rely bro
I have to complete it, got it as a mandatory assignment, with a portfolio site xD
@@avtar2565 css is always first, try learning through Mozilla developer for everything. Tutorials generally cover enough basics to get you going and learn on your own.
@@animeprogrammer bro i just finished to grid box and flex box , now from tomorrow I will start advance like animation and other stuff, although i practiced every module, the execution of full web is bit touch i mean it will take time to think like developer how to use each and every part
I am actually working with tailwind at work and other than Brad's, I couldn't really find a good tutorial. So glad that you are making one! You pumping out content like a boss
I updated the installation instructions as of 7/20/22:
Follow the video until 6:43, then run the following in the terminal:
npm install -D tailwindcss
npx tailwindcss init
Open the 'tailwind.config.js' file you just created and edit 'content' so that the file reads:
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Save the file. Skip to 7:45 and copy and paste the @tailwind code as directed.
When the video gets to 10:32, delete the initial script as instructed, but add the following script instead:
"build-css": "npx tailwindcss -i src/styles.css -o public/styles.css"
Continue to follow along with the video. Hope that helps!
thank you so much kind sir
It didn't work for me. It's showing specified input file src/styles.css does not exist. Please can you help
@@darhvid create a folder inside your current folder (where you're working right now) and name it "src". inside that folder, create a file named "styles.css"
@@ArnabJhaYT Thank you but now its showing "No utility classes were detected"
@@darhvid i am having the same problem pal
🎯 Key Takeaways for quick navigation:
00:00 🌟 *Introduction to Tailwind CSS Tutorial*
- Introduction to the Tailwind CSS tutorial series.
- Mention of channel support options and tutorial structure.
00:43 📚 *Explanation of Tailwind CSS*
- Description of Tailwind CSS as a utility-first framework.
- Comparison with other CSS frameworks like Bootstrap and Materialize.
01:25 🛠️ *Building Components with Tailwind*
- How to build custom components using Tailwind's utility classes.
- Flexibility and uniqueness in design compared to other frameworks.
02:21 🖥️ *Practical Application of Tailwind*
- Tailwind's application in building a simple web page.
- Overview of the tutorial's focus areas like typography, spacing, and responsive design.
03:20 💡 *Prerequisites for Learning Tailwind*
- Necessary knowledge of HTML and CSS before starting Tailwind.
- Reference to additional resources for learning HTML and CSS.
03:48 ⚙️ *Setting Up Tailwind via NPM*
- Installing Tailwind using Node Package Manager (NPM).
- Requirements for installation including Node.js.
05:28 🖋️ *Initializing the Project with VS Code*
- Starting a new project and setting up directories for Tailwind.
- Use of Visual Studio Code as the recommended text editor.
06:24 📝 *Creating and Building the CSS File*
- Steps to create and build the CSS file using Tailwind.
- Importance of package.json in tracking dependencies.
07:20 🎨 *Understanding Tailwind's Workflow*
- Explanation of Tailwind's processing of source and output files.
- Emphasis on the use of utility classes in HTML.
08:45 📁 *Organizing Source and Public Folders*
- Creating and organizing source and public folders in the project.
- Description of the purpose of each folder.
10:07 🔄 *Processing Tailwind CSS File*
- Process of transforming the source CSS file into an output file.
- Setting up build scripts in package.json for Tailwind.
12:26 🖥 *Starting HTML Page Creation*
- Transition to creating the HTML page in the next tutorial.
- Brief overview of the HTML page setup process.
12:52 🌐 *Accessing Course Files and GitHub Repo*
- Availability of course files for each tutorial lesson on GitHub.
- Instructions on how to access specific lesson files on GitHub.
Made with HARPA AI
No way!
My friend was just telling me about how awesome Tailwind is, like a few days ago
And I was like man I wish Net Ninja did a tutorial about it.
saaame, this dude has super powers xD
Fate eh!? On a serious note man, tailwind is killer stuff
@tailwind base;
@tailwind components;
@tailwind utilities;
This is giving me error and my style.css file inside public folder is also empty after building and compiling the styles. css file in sec folder
I've started a new front end role this week with a company using Tailwind, and you so happen to be doing a tutorial on it. Total Win!
Awesome - good luck in your new job :)
@@NetNinja Thanks. I've just recommended your channel on a react users discord. I was asked what resources were a great help getting the new job.
So I just heard about Tailwind five days ago, started my learning two days ago, and was pleasantly surprised to find out you're still making a series of tuts videos on it. I hate to imagine how learning Tailwind would have been without you. Thank you, Shaun. Keep up the good work, you're much appreciated!
Thank you :)
How's your tailwind journey going so far?
I have been racking my brain trying to understand tailwinds responsive classes.
Thanks to you and your teaching style I have a better grasp with it now. I appreciate your contribution to the dev community and I'm happy you take the time to make us all better at what we do. 🙏
Woke up this morning to this. It is going to be a good week.
Where there's tailwind, there's happiness.
I am completely new in tailwind. I have just completed this whole series and now I am feeling super confident about using it in projects. Thanks a lot, man ❤
How you finish this series on the first video? Why do people lie so much?
@@itsnobledean9450 since this is a playlist, maybe after the last video. He came back here to comment.
@@mikkun_ there are a number of people on the third video stating nothing is working, so I doubt that. Literally none of the styles were working, so why don’t you go ahead and do it and tell me how and where you got stuck without the styles.
@itsnobledean9450 Everything works as is. I just tried it. If the styles doesn't work, maybe because you haven't built your css. In the first video, you have setup a script which you can run using "npm run build-css" or much better as stated in the latest docs installation "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch. The --watch flag basically builds the css every time there is a change. Correct me if I don't understand your problem.
@itsnobledean9450 I also saw your other comments. Please do note that you shouldn't fully rely on these videos as these are not always the updated version. These are years ago. Better read the docs. Everything is listed there, along with the template. You just need to search (literally). If you want the font weight, then search it. It'll show you the template font-{weight}
Hey Shaun,
I love what you’re doing with The Net Ninja.
Shouting out to you from Nigeria, Africa
My fellow Nigerian 😇😇
Tailwind is one of those frameworks I've been hearing about for some time but have never had the chance to play around with it. This will be interesting.
Net Ninja you are on fire. Whenever I think of any framework, you just upload their tutorial. It's like you are reading our minds
Back to back non stop series🔥... Thanks ninja ❤️
I was surfing the you tube searching for a good tailwind CSS tutorial and guess what? I ended up with the channel who already made my flutter journey memorable and easy. Thanks bro ! Even though this playlist is 3 years old, I like to watch if it's yours.
was it worth to watch this?
@@noorbashavinny2114 yes, but i guess you should have basic knowledge in css
Thanks ninja! I really love your channel, I recommend to my friends your videos, amazing!
Thank you :)
My french teacher recommended us a video that was long and complicated (the youtuber prob assumed everyone knew basic steps so he either skipped them or didnt even mention them). Luckily, I m fluent in english so I foudn your channel and Hope has started brighting in my heart since. Thank you for your work, you are making a difference in people' careers
Thank you. What a lovely comment :) that means so much and I'm very happy for you! Glad to have you on board with Net Ninja!
You're no super ninja. You are SENSEI. Thank you so much for empowering us with these ninja skills. Your delivery is stellar , you make things easy to understand. Thank you Shaun!
by far your tutorial is what i have been searching for since morning 🥰🥰
I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... What do you think about my version? second best? 😉
Dude , I have no words for your teaching style.
I have learnt a lot from you , keep going 👍
This is what I was waiting for. Love your content.🥰
Thank you :)
Already implemented tailwind css , now here comes one of my favorite instructors on youtube.
#thenetninja
Hi Ninja, thank you for this highly informative and perfect step-by-step setup tutorial. Honestly, I've watched at least 10 different setup tutorials, but none clicked until I checked yours. Precise and clear explanation. Thanks again!
I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... What do you think about my version? second best? 😉
I hit like before I watch, your content is always FIRED UP!
Thank you :D
Thank you so much, Shaun. you are an amazing tutor. Watching everything with the ads inclusive.
Thank you so much :)
Mr. net ninja you had my curiosity, you had my attention and you will always have my respect. Thank you very much!
Thanks for the Tutorial series!
I had to install autoprefixer and postcss manually to get it to work.
npm install tailwindcss
+ npm install autoprefixer
+ npm install postcss
I came from the end of this tutorial series and took this on one set. Excellent content!
Is this the best channel of TH-cam?
For framework in frameworks, no matter for how long it loops, it keeps returning True ;)
I wonder what you are eating these days
Can't believe tutorial after tutorial for free
Keep up the hard work but have rest
Looking forward to an updated Vue.js course from you
Vuejs is love.
he is mrbeast of coders
Guys!! just go to tailwind docs and follow the installation process and then start on with the series because it's still super relevant in terms of CSS concepts and techniques! Not outdated at all like others say.
To be honest, I saw this Tailwind css thing floating, but now that you are covering it, hey why not, I am in.
Awsome. You're are a great programmer. Very effective way of teaching and describing everything.
Hey man, don’t forget to take some time off now and then ;)
However, this is much appreciated!
Will do, thanks :)
How consistently and hard this man works is humbling
@@NetNinja just finished css, and I am new to frameworks especially Tailwind I have some concerns.
1.Do I need to download the depencies for every project on my local machine? or I can just copy the sytles.css with the dependecies to the new project folder.
2. What if I need to separate my Tailwind just like my normal css?
Was searching TH-cam for a good Tailwind tutorial, when suddenly a wild ninja appeared and helped me! Thanks man, that's a great job you are doing here! Keep on the amazing stuff, you're a great teacher! :D
search lots of video but i didnt find anything and this video make ninja. love you...
Great start, will finish it in 2 weeks or so, watching it while on the way
Thank you Net Ninja, clear, precise and a wonderful example of how to do a teaching video!
So unbelievably clear. Great tutorial
You changed my life. Thank you, Net Ninja!
7:50 For development purposes, you can simply use tailwind CDN in the html. There is no need to compile and do all these steps. Of course these are needed for production deployment, but if someone wants to learn tailwind fast, better to just use CDN.
Sensei, I love your content more than I can express to you. I mean I just get a series for whatever I want on your channel. I just love it. Thank you so so much for making my coding journey and experience so awesome !!!
Thanks so much :)
In the future, when I succeed, I will never forget you, my great teacher!!
Tailwind pairs so perfectly with Vue as they both are meant to create components from scratch! Love your work!
A really well thought out course - especially for those just starting out with Tailwind, like myself. Thank you Jonin!
Net Ninja, you are a web dev content producer machine . . . Just amazing!!!
This is the best tailwind build-a-webpage tutorial on the interwebs, good job. Thanks!
That energy in your voice boosts me up!
This channel has everything I need.
What a wonderful tailwindCSS intro courses!! Thanks a lot for your efforts.
Great Man & Powerful Voice. Loved and Helpful
Thank you Ninja Bro
Shaun, mad respect for you man! ❤
You are a gem, thank you so much for sharing your knowledge with us. It would be great if you could please do some playlist like this on Chakra UI.
Thank you Shaun, the super Ninja. Approaching 12 months of paid subscription, soon I will too have a full faced ninja in my name
Hey, thanks so much, I really appreciate it! :)
Just watched the whole thing. Amazing content. Earned a subscriber
Love you a lot. I always wait for your new series .......I really enjoy it
Thank you very much, am glad you hear me. Thanks for this tutorial on tailwindcss 🔥🔥I will become a ninja after this one. you rock Man.
Once again, awesome tutorial. Much love here from Tanzania.
Thanks very much for this series - it was just what I needed! 🙏
Extra thought: It would be great to see a video on tree shaking (Controlling File Size
) as the output CSS is very large.
I agree. Was thinking fo doing a one-off vid on this using PurgeCSS.
You are the best tutor along with mmtuts, can't believe all of this is free
If possible, could you do a new series on TW 2?
First video of NetNinja, Fan Already ❤️
Looking forward to this :)Love your tutorials and your teaching style , great work man. I'd wake up make coffee and Ninja time before work.
Oh my god....another series .... I can't learn everything but man, your teaching is soo good
The latest documentation says to install tailwindcss@latest postcss@latest autoprefixer@latest as developement dependencies, not just tailwind. It also requires a PostCSS config with tailwind and autoprefixer plugins. If you are having issues, go read the documentation. It is very well made
You are amazing instructor!
Thank you. The subject matter is very well organized and comprehensive. However, what makes this tutorial so fantastic are 1) "Net Nija's" positive and energetic personality combined with 2) His solid pedagogy skills. Great job.
Net ninja!!! You are love ❤❤❤. You just read my mind.
Thanks so much The Net Ninja for the nice way of explaining tailwind css
This is a fantastic tutorial for Tailwind. Thank you!
Ah. It's time to learn tailwind. I see. Best teacher ever 😊😊😊😊😊
Great timing with this video series. I just started learning and implementing Tailwind :)
0:08 support channel (plz)
0:38 What is Tailwind CSS?
2:26 design simple web page
3:05 You Should Know
4:10 Download Node
4:57 create a project
6:15 create a new package
6:43 npm install tailwind CSS
7:45 How Tailwind Works
9:44 Add the Tailwind directives to your CSS
10:16 register certain script
absoluted goated. One of the best ever to do it.
For anyone else stuck going back to this and the "Fonts & Colors" video: Use the "--watch" at the end of the "build-css" script in "package.json" this will allow you to not have to run the "build-css" script in NPM everytime you want to make a change:
Update in package.json under "scripts":
"build-css": "tailwindcss build -i src/styles.css -o public/styles.css --watch"
Absolutely amazing video. Really helpful.
My teacher...knows just what i'm about to learn
Just working through the svelte tutorials (after doing your udemy JS course) and needed tailwind next - thanks!!
Thank You Mr Shaun...This Channel is a University on its own 😂
Bro you are an amazing tutor. Thanks a lot for that tutorial
You're welcome!
Quick and clear, thanks
You are really ninja of coding
감사합니다. thank
Anyone in 2023?
Is this course outdated?
@@defabc2648 not at all
I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... This should be exactly what you are looking for... 😉
🙌
No, we skipped
appreciate your learning method bro, clear and efficient.
Perfect! Thanks so much. This is what is missing from Tailwind CSS docs actually 😊
This is amazing, keep up the great work!
Tailwind has updated their build script. Just change the package.json script to:
"build-css": "tailwindcss -i src/styles.css -o public/styles.css --watch"
--watch will auto-detect changes and rebuild the css.
Thanks for sharing! 😉
Thanks
Great! I was waiting for this. Thanks man. By the way can you update the React js series? You work really hard i don't want to request you but i only follow you mostly. You are the best teacher for me. Much love and appreciation ❣️
Just awesome, thanks a lot to everybody who is involved in keeping this channel alive. Simply amazing !!!
Thanks Mauro :) appreciate your support!
Please is this course still relevant in 2023 or are some things outdated?
@@NetNinja
Great content as always. Looking forward to this one.
Thank you Shaun.
I'm waiting for this.
Omg no way man you are awesomeeeeeeeee 😍😍😍
Very nice
I was wanting to learn this
Sensei, you are not Human. You are super Human. I wish to have the same drive as you one day.
Are you kidding me? I loved it!
Awesome! :)
Really good tutorial, thanks man!
I watched your bootstrap and was able to quickly learn it..
Now turn for the tailwind css
Awesome, have fun! :)
Perfect Ninja 🥷
We need tailwind v3 full tutorial please. Thanks for the great efforts.