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

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

#webdev #css #tutorial

🔗 Resources

Tailwind Docs
Tailwind React Setup
Source Code

📚 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
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

source