Tailwind CSS Tutorial #1 - Intro & Setup

In this tailwind css tutorial we'll take a look at what tailwind css is, how to use it & set up a new project.
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/vu...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/tailwin...
+ Full html template - github.com/iamshaunjp/tailwin...
🐱‍💻 🐱‍💻 Other Related Free Courses:
+ • HTML & CSS Crash Cours...
Download node.js - nodejs.org/en/
Get VS Code - code.visualstudio.com/

[@harunaoseni555]

I love how this dude teaches like it's everyone's first time programming.

[@Kevthedev00]

He's personally my favorite instructor. I said it in this video. kzbin.info/www/bejne/epiqgaWkg5eEaMU

[@tmgs1986]

It’s definitely needed and appreciated. It also makes me feel like he knows what he is talking about.

[@Web-Dev-Codi]

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. 🙏

[@laithacademy]

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

[@alistairmorris462]

A really well thought out course - especially for those just starting out with Tailwind, like myself. Thank you Jonin!

[@animeprogrammer]

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!

[@avtar2565]

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

[@jannickpedersen4620]

I have to complete it, got it as a mandatory assignment, with a portfolio site xD

[@animeprogrammer]

@@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.

[@avtar2565]

@@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

[@unicusmedia695]

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!

[@ankushchavhan1332]

Dude , I have no words for your teaching style. I have learnt a lot from you , keep going 👍

[@abhiyudaibhakuni4957]

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

[@goncalodumas]

This is the best tailwind build-a-webpage tutorial on the interwebs, good job. Thanks!

[@tesla1772]

Back to back non stop series🔥... Thanks ninja ❤️

[@allandacasin9041]

I came from the end of this tutorial series and took this on one set. Excellent content!

[@Ryan-ff2db]

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.

[@cherieecoco]

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!

[@NetNinja]

Thank you :)

[@MananGouhari]

How's your tailwind journey going so far?

[@StrictlyTango]

Thank you Net Ninja, clear, precise and a wonderful example of how to do a teaching video!

[@kstarczak]

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!

[@ArnabJhaYT]

thank you so much kind sir

[@darhvid]

It didn't work for me. It's showing specified input file src/styles.css does not exist. Please can you help

[@ArnabJhaYT]

@@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"

[@darhvid]

@@ArnabJhaYT Thank you but now its showing "No utility classes were detected"

[@sistudios2388]

@@darhvid i am having the same problem pal

[@rahatfaruk2218]

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 ❤

[@itsnobledean9450]

How you finish this series on the first video? Why do people lie so much?

[@mikkun_]

@@itsnobledean9450 since this is a playlist, maybe after the last video. He came back here to comment.

[@itsnobledean9450]

@@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.

[@mikkun_]

@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.

[@mikkun_]

@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}

[@marie_705]

Was searching KZbin 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

[@samip4sure]

Mr. net ninja you had my curiosity, you had my attention and you will always have my respect. Thank you very much!

[@jozsefk9]

Perfect! Thanks so much. This is what is missing from Tailwind CSS docs actually 😊

[@alquinex]

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.

[@ibadshaikh2215]

That energy in your voice boosts me up!

[@rorycawley]

This is a fantastic tutorial for Tailwind. Thank you!

[@midhunmohan5112]

You changed my life. Thank you, Net Ninja!

[@ansarqazi4377]

Awsome. You're are a great programmer. Very effective way of teaching and describing everything.

[@badripaudel77]

Already implemented tailwind css , now here comes one of my favorite instructors on youtube. #thenetninja

[@salimkachemela]

Once again, awesome tutorial. Much love here from Tanzania.

[@mahmoudtokura]

Woke up this morning to this. It is going to be a good week.

[@MananGouhari]

Where there's tailwind, there's happiness.

[@afterglow1390]

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.

[@MULTICODE]

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.

[@bijayaadhikari442]

This is what I was waiting for. Love your content.🥰

[@NetNinja]

Thank you :)

[@introvertsgo]

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!

[@NetNinja]

Awesome - good luck in your new job :)

[@introvertsgo]

@@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.

[@Zentamusic]

So unbelievably clear. Great tutorial

[@sakshamkapoor5905]

Shaun, mad respect for you man! ❤

[@TorIvanBoine]

Great timing with this video series. I just started learning and implementing Tailwind :)

[@shrestha0144]

Oh my god....another series .... I can't learn everything but man, your teaching is soo good

[@jacevans9705]

Just working through the svelte tutorials (after doing your udemy JS course) and needed tailwind next - thanks!!

[@nrlinsni]

Thank you Shaun. I'm waiting for this.

[@sky_kryst]

Going through your tailwind playlist for the second time for a new project. Your tutorials are the best to watch as and when required. Wanted to know what you think about Chakra UI and will you be coming up with a tutorial any time soon?

[@ivanheinzer6829]

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

[@g-luu]

Great content as always. Looking forward to this one.

[@oscarmartinlive]

Hey Shaun, I love what you’re doing with The Net Ninja. Shouting out to you from Nigeria, Africa

[@jameschibu7470]

My fellow Nigerian 😇😇

[@jidaasare7021]

Thank you so much, Shaun. you are an amazing tutor. Watching everything with the ads inclusive.

[@NetNinja]

Thank you so much :)

[@gabrielgherman87]

Is this the best channel of KZbin? For framework in frameworks, no matter for how long it loops, it keeps returning True ;)

[@user-xi8dy8tt8n]

What a wonderful tailwindCSS intro courses!! Thanks a lot for your efforts.

[@shin5302]

This channel has everything I need.

[@muhammedismail8299]

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.

[@laurabennis3871]

saaame, this dude has super powers xD

[@MananGouhari]

Fate eh!? On a serious note man, tailwind is killer stuff

[@jaymishra1781]

@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

[@snakemanluffy7645]

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 ❣️

[@outrageousKilla]

Just watched the whole thing. Amazing content. Earned a subscriber

[@kazinoman3039]

Love you a lot. I always wait for your new series .......I really enjoy it

[@hanthedeveloper5900]

appreciate your learning method bro, clear and efficient.

[@adeisaac]

To be honest, I saw this Tailwind css thing floating, but now that you are covering it, hey why not, I am in.

[@thanossmponias2915]

Net Ninja, you are a web dev content producer machine . . . Just amazing!!!

[@zeeshanalikhan8258]

Love the way you teach, perfect!

[@pablofonseca8867]

Thanks ninja! I really love your channel, I recommend to my friends your videos, amazing!

[@NetNinja]

Thank you :)

[@machinelearningone2635]

Tailwind pairs so perfectly with Vue as they both are meant to create components from scratch! Love your work!

[@iKingGlitcher]

This is amazing, keep up the great work!

[@gokulkurup1584]

absoluted goated. One of the best ever to do it.

[@Salmancreationbd]

Great Man & Powerful Voice. Loved and Helpful Thank you Ninja Bro

[@techienomadiso8970]

I hit like before I watch, your content is always FIRED UP!

[@NetNinja]

Thank you :D

[@phonghoanggia9181]

In the future, when I succeed, I will never forget you, my great teacher!!

[@martiananomaly]

Absolutely amazing video. Really helpful.

[@user-to9kf9xo2h]

by far your tutorial is what i have been searching for since morning 🥰🥰

[@lukas.webdev]

I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... What do you think about my version? second best? 😉

[@kieran5746]

Thanks very much for this series - it was just what I needed! 🙏

[@kieran5746]

Extra thought: It would be great to see a video on tree shaking (Controlling File Size ) as the output CSS is very large.

[@NetNinja]

I agree. Was thinking fo doing a one-off vid on this using PurgeCSS.

[@user-md3nv8he7x]

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?

[@tn9753]

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.

[@fuad7258]

search lots of video but i didnt find anything and this video make ninja. love you...

[@Shakeel714]

Thanks so much The Net Ninja for the nice way of explaining tailwind css

[@a4cfee]

Great start, will finish it in 2 weeks or so, watching it while on the way

[@swoorp]

The title track sounds like a Pacman game, loved it!

[@IAmSamuelCharpentier]

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

[@hiddenpants4059]

love you , be healthy and keep up the good work

[@JonsonNcube]

This is going to be exciting :D

[@KenAdams-sn8yd]

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.

[@noorbashavinny2114]

was it worth to watch this?

[@KenAdams-sn8yd]

@@noorbashavinny2114 yes, but i guess you should have basic knowledge in css

[@Quintren]

i really appreciate this tutorial! Thank you very much!

[@g0thman865]

I LOVE THE NEW INTRO!!!!!!

[@ra1n_]

First video of NetNinja, Fan Already ❤️

[@mantassuminas8774]

styles.css tailwind unknown css rule, install extension PostCSS Language support. and if you want that npm run build-css would work install in terminal "npm install tailwindcss postcss autoprefixer" you can build utilities css file with out script like that in terminal "npx tailwindcss-cli@latest build -o styles.css"

[@mayankarya2830]

thanks man

[@lilith420_]

Thank you :D

[@siri3359]

You are amazing instructor!

[@armendshala7229]

Thanks for the great tutorials.

[@jonkarrer4000]

You are the real deal my friend

[@sajalhsn13]

Net ninja!!! You are love ❤❤❤. You just read my mind.

[@weeeBloom]

thank you very very much Ninja! I do really apreciate it!

[@danielenocito5080]

Thank you, crystal clear

[@drhastings]

Thank You Mr Shaun...This Channel is a University on its own 😂

[@norbertoignaciojr3365]

Ah. It's time to learn tailwind. I see. Best teacher ever 😊😊😊😊😊

[@ronnie4995]

Looking for this!

[@pedroaugustosantana793]

Absolutely fantastic content. How I haven't found your channel before ?

[@waifufx]

Thank you sir for the tutorial

[@devcore1]

🎯 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

[@masimumengi5650]

My teacher...knows just what i'm about to learn

[@Anstroy95]

Damn I needed this! 👌

[@Prod3t]

we love this ninja man

[@nerostadnitzki1208]

Love this tutorial.

[@Free--Soul]

great work dude

[@thehomedepothouseplant9986]

Great tutorial. Thanks brotha !

[@muhammadahmedjaved7691]

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

[@MananGouhari]

Vuejs is love.

[@ajitsakri9888]

he is mrbeast of coders

[@abhayganti8662]

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 !!!

[@NetNinja]

Thanks so much :)

[@mooder3247]

Omg no way man you are awesomeeeeeeeee 😍😍😍

[@TechnoDB]

Awesome Ninja.. Good initiation :)

[@himbary]

Your slides always look awesome! How did you learn designing?