Tailwind CSS Tutorial #1 - Intro & Setup 

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

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!

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!

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.

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.

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!

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

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!

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

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

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

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 ❤

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

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

Hey man, don’t forget to take some time off now and then ;) However, this is much appreciated!

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

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.

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"

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

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

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

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

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

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

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!

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

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

Anyone in 2023?

🎯 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

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

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

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

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.

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

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

Thank you Shaun, the super Ninja. Approaching 12 months of paid subscription, soon I will too have a full faced ninja in my name

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

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

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

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

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

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

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

Was searching RU-vid 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

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

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.

Hey! Whoever Got this **Module not found** Problem run this command first to install tailwindcss: `npm install tailwindcss@latest postcss@latest autoprefixer@latest` then run: ``npm run css-build ``

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

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

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?

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

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.

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

Comment for New Viewers: Hi everyone! I ran into some issues following this tutorial, and I wanted to share some tips to help you avoid the same problems. Update Tailwind Configuration: Make sure to include the content paths in your tailwind.config.js. Without this, Tailwind CSS won't be able to find your HTML or JS files to generate the necessary styles. Add HTML Files: Create an index.html file (or other HTML files) in your src directory. Tailwind CSS needs these files to be present to apply styles. Run the Build Command: After setting up the Tailwind configuration and adding HTML content, run npm run build-css to generate your public/styles.css file. USE CHATGPT TO HELP WITH HOW TO UPPDATE TAILWIND CONFIG AND ADD HTML FILES.

You changed my life. Thank you, Net Ninja!

So unbelievably clear. Great tutorial

This channel has everything I need.

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.

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

You are amazing instructor!

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

I watched your bootstrap and was able to quickly learn it.. Now turn for the tailwind css

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

Shaun, mad respect for you man! ❤

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

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

Just awesome, thanks a lot to everybody who is involved in keeping this channel alive. Simply amazing !!!

So, here I am in Dec 2023, going through this terrific looking tutorial, and it just wasn't working for me. Specifically, when running the `build-css` script in package.json it only produced about 500 lines of CSS in the output file, as opposed to about 2.5M in the tutorial. Plus, the screen output specifies that "No utility classes were detected in your source files." This is because I'm using a more modern version of the tailwindcss processor (3.3.6) than that used in the tutorial (1.4.6). To get around this, I specified the older version in my package.json file, and boom (!) I got my 2.5M output. I hope this helps someone avoid days of headbanging.

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

Hold on...oh, I see, this is three years old. Modern Bootstrap exposes all the low-level optional classes exactly like this says Tailwind does. They're even named about the same thing. But in Bootstrap, you also have the option of higher-level classes.

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

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

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

This is a fantastic tutorial for Tailwind. Thank you!

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

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.

Guys please I need help I’m stuck in the first step I’ve been trying for like 3 hours but it won’t come I’m doing everything he does step by step but when it comes to “npm run build-css” when I press enter in the terminal it says to me that I’m running tailwind without “-i” what can i do to fix it? Is it because I’m running a newer version ?

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

That energy in your voice boosts me up!

My @tailwind base component and utilities styles bring up problems "Unknown at rule @tailwind" anyone know why?

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

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

You are really ninja of coding

11.42 "Running tailwindcss without -i, please provide an input file." This error is displaying while doing this. Please help me out with a solution anyone ? Thank in advance.

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

Sensei, you are not Human. You are super Human. I wish to have the same drive as you one day.

"[deprecated] running tailwind without -i, please provide an input file" What to do next?

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

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

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

Absolutely amazing video. Really helpful.

The year 2021 - THE NET NINJA: Rewriting The Linux Kernel in Typescript #1 - Intro & Setup

Great content as always. Looking forward to this one.

Bro you are an amazing tutor. Thanks a lot for that tutorial

appreciate your learning method bro, clear and efficient.

For the record, if you get Bootstrap from npm, you can forgo the JS and most of the SCSS files that make Bootstrap look like bootstrap and just use the utility classes it has too. I'd be curious to compare the bundle sizes of Tailwind and the minimum required files to get Bootstrap up and running.

Love you.but please make video tutorials on bootstraps 5 series and more node and deno series