Tailwind Crash Course | Project From Scratch

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