Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar

Thanks! Share it with your friends!

You disliked this video. Thanks for the feedback!

Added 3 years ago by admin

172 Views

Learn the basics of Tailwind CSS by building a Discord-inspired navbar from scratch. Learn how to leverage utility classes to build responsive animated UI elements faster https://fireship.io/lessons/tailwind-tutorial/

#webdev #css #tutorial

???? Resources

Tailwind Docs https://tailwindcss.com/
Tailwind React Setup https://tailwindcss.com/docs/guides/create-react-app
Source Code https://github.com/fireship-io/tailwind-dashboard

???? Chapters

00:00 Intro
00:54 Should you use Tailwind?
01:42 Setup
02:48 JIT Mode
03:20 Functional CSS Basics
04:06 Flexible Container
04:41 Organize UI Components
05:07 Position a Sidebar
06:58 Customize Colors
07:50 Icon Buttons
08:23 Custom Classes with Apply
09:32 Pseudo-class Variants
09:56 Animation
10:34 Groups
11:54 Dark Mode

???? Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

???? My Editor Settings

- Atom One Dark
- vscode-icons
- Fira Code Font

???? Topics Covered

Beginner Tailwind Tutorial
Using Tailwind in React
Tailwind Animation
Tailwind Dark Mode
CSS vs Tailwind vs Bootstrap