Build a Modern Landing Page With Tailwind CSS

In this video we build out a modern landing page using the utility first css framework, Tailwind CSS.
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
Referenced/helpful videos to watch based on this project:
-----------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
Timestamps:
0:00 Introduction
2:57 Brief Introduction to TailwindCSS
5:51 Setup Tailwind with NPM
10:47 Setup Tailwind Configuration (Container, Custom Colors & Font )
23:20 Header/Naivgation
38:16 Hero
46:00 Tailwind Base Styles (Button Classes)
49:15 Hero (...Continued)
1:01:24 Features Section
1:16:05 Download Section
1:29:42 FAQ Section
1:35:53 Contact Us
1:43:35 Footer
1:49:25 Whats Next?
-------------------------------------------------------------------------------------------------------
#tailwind #tailwindcss #tailwinds
Current Subscribers: 1,273

[charlene]

I'm an hour in and had to stop and say that this is the best tailwind tutorial EVER!!! and this instructor is amazing. Blown away by the clarity and depth of explanation. It's such a skill to be able to teach this well. It's rarely seen on Youtube

[jamesmcgee]

This is absolutely the best tailwind tutorial I've ever run across, and the reason why is because John actually explains the utility classes and why they're being used. Most YT tutorials are just someone typing out stuff they've already built with no explanation.

[XavierSmithXcellence]

What I appreciated about this tutorial is that you went at a slow enough pace for me to take in what you were saying but without feeling like I'm dragging through the video. Good work. Definitely subscribing.

[dinkeydonutfilmz]

amazingly clear. Understood your work and explanations so well I could implement into React! Agree, best tailwind tutorial I have come across.

[GustavAgar]

since newer versions of tailwind you need to add an input file in the command (9:30) so it will be:
"build:tailwinds": "tailwind build -i src/style.css -o public/style.css"

[dragonballmysteries]

This Tailwind tutorial is the best one I have seen thanks John Komarnick.

[Toni-nwdk]

This is an amazing Tailwind CSS tutorial! You explain everything so well!

[rashmi_t]

I only watch 19 min video and had to stop and say that this is the best tailwind tutorial EVER!!! and you are an Amazing instructor. Very clear instructions and easy to follow as well. Thank you so much for sharing such a valuable content free of cost. may Almighty bless you. Amen. I subscribed your Channel as well.

[JohnKomarnicki]

** update: The setup for tailwind has changed slightly since creating this video. I have a new video with a updated/current way to setup tailwind. The project we build is relevant in this video, but if you’re having trouble with the setup, check out this video:

* Working on an update to this video, as some things have changed since creating this video! Another error you might run into is "content option is missing". The new JIT feature requires this for purging. So simply for this project you can add this:
content: [
'./public/**/*.{html}',
],

Also, with newer versions of tailwinds, the build command has been updated, and should appear as so: tailwind build -i src/style.css -o public/style.css

Use this to avoid errors when running that script!

[Trinad]

Thanks a lot for your excellent tutorial which helps a lot of people like me who wants to learn tailwind but don't know where and how to start.

[Praize-yx]

Amazing tutorial for as beginner it was very easy to follow and even understand each and every step. It was a really helpful tutorial. Thank you.

[rahatfaruk]

Clear & well explained. Learned a lot while building project. He also showed how to use documentation which is really useful in the long term. 🙂

[mmij]

The tutorial was really helpful and the main thing I liked is that when you use any class you show the class details from the Tailwind CSS documentation. Take love✨

[nitinsoni]

Hello John your videos are really good. Looking forward to more videos from you. Brad has really introduced his viewers to some really good tutors like you and I'm glad now I'm subbed to both channels.

[wplearners]

Awesome tutorial - would be cool if you updated it slightly to include 'jit' which minimises file size and auto builds instead of having to run the script every time. Also it would have been cool if we could have had the design file to hand, I like to challenge myself by seeing what I can do before you, the teacher, shows us.

Either way - really appreciate the content my man, super helpful. Looking to build Tailwind into my wordpress dev workflow!

[sayemalmahdi]

Trust me this is the best Tailwind CSS Ever ! Thanks man for sharing such tutorial and hope more tailwind css will come

[kamaboko]

Tailwind should have just hired you to make their Tailwind tut videos. I found your info so much more practical for real use cases. Thanks.

[Webtricker]

Thank you so much for explaining modern landing page with Tailwind CSS in such a simple and beautiful way.😊

[NitinRanganath]

You're really underrated. Good things await for you 😉

[thitipatch]

This is awesome! Thank you for your explaining.