Install Tailwind CSS v3 - CDN vs CLI vs PostCSS

Tailwind CSS released it’s major version 3.0 on December 9th. If you’re new to Tailwind or front end development, you might wonder how to install and start working with this latest version of Tailwind CSS in simple projects that don’t use any of the frameworks listed in the documentation.

In this video I’ll show you three ways - via CDN, using Tailwind CLI and using PostCSS and talk about when to use what.

0:00 Introduction
1:23 Include Tailwind CSS using CDN
4:10 Official plugins using CDN
5:23 Configuration using CDN
6:40 Custom Styles using CDN
9:02 Arbitrary values using CDN
11:02 Install Tailwind CSS using CLI
14:32 Configuring template paths
15:27 Custom Styles using CLI
17:09 Start Tailwind CLI Build Process
19:27 Official Plugins using CLI
21:31 Optimise for Production (minify) using CLI
21:56 Using scripts for dev and prod
23:11 Install Tailwind using PostCSS
24:51 Configuration using PostCSS
26:31 Start Build Process using PostCSS
30:16 Install cross-env for Windows OS
30:57 Optimise for Production (minify) using cssnano with PostCSS
33:20 Summary

#tailwindcss #tailwind

[pedromchd]

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!

[piyushkkr]

Thank you so much!!!! I am in tears! I spent more than a week to figure out the solution to my problem

[sibtycodes]

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

[leogold]

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!

[fd]

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.

[shinichimiyakawa]

Amazing tutorial! I have spent all morning and day trying to add tailwind without CDN links lol. Thank you for this video Thirus!

[jeanlaguna]

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.

[ChrisWalker-pdxn]

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.

[devbutime]

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 ❤

[seghirissam]

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

[samuelodan]

Hands down the best install tutorial I found. Thanks so much.

[brandonmerry]

wow thank you for the "hand holding" of how to get this up and running. youre a fantastic teacher!

[arielspalter]

Fantastic tutorial. You are gifted instructor! Happily subscribed.

[BneiAnusim]

Very nice in-depth explanation! Thanks! 😉

[DTUSEM]

Good content. It makes me more professional in TailwindCSS. Nice way of explanation. Easy to understand. Thanks. Subscribed

[bamlagdameo]

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.

[shashiupadhaya]

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!

[McElitsome]

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

[NguyenTien-svnd]

Thank you for all your helpful knowledge. My knowledge has expanded further.

[ankitkaushikt]

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