Tailwind Crash Course | Project From Scratch

Traversy Media

In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git.

⭐ Sponsor: InMotion Hosting!
https://bit.ly/3uVNhD6

💻 Code:
https://github.com/bradtraversy/tailwind-landing-page

Frontend Mentor Challenge:
https://www.frontendmentor.io/challenges/manage-landing-page-SLXqC6P5

Csaba Kissi Twitter (Tailwind Course Helper):
https://twitter.com/csaba_kissi

👇 Website & Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 – Intro
2:45 – Getting Started
4:58 – Install & Setup Tailwind CLI
7:39 – NPM Scripts & Output
11:00 – Customizing & Config
13:25 – Navigation Area + Spacing, Flex, Responsive Classes, etc
24:06 – Hero Section
30:43 – Class Name Order Convention
33:44 – Features Section
44:58 – Testimonial Section
54:15 – CTA Section
59:34 – Footer
1:10:59 – Hamburger Menu HTML
1:15:38 – Custom CSS (Background SVGs)
1:19:45 – Custom CSS (Hamburger Menu)
1:25:08 – Menu JavaScript
1:28:27 – Deploy To InMotion Hosting