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 https://fireship.io/lessons/tailwind-tutorial/

#webdev #css #tutorial


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


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

Source: https://www.youtube.com/watch?v=pfaSUYaSgRo

Leave a Reply

Your email address will not be published. Required fields are marked *