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
🔗 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
Видео Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar канала Fireship
#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
Видео Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar канала Fireship
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Using Tailwind CSS Grid Classes](https://i.ytimg.com/vi/Y891NBAdtgI/default.jpg)
![](https://i.ytimg.com/vi/27qrc9845ho/default.jpg)
![Tailwind in 100 Seconds](https://i.ytimg.com/vi/mr15Xzb1Ook/default.jpg)
![Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial](https://i.ytimg.com/vi/Q7AOvWpIVHU/default.jpg)
![Styling Forms with Tailwind CSS](https://i.ytimg.com/vi/pONeWAzDsQg/default.jpg)
![Should You Use Tailwind CSS?](https://i.ytimg.com/vi/hdGsFpZ0J2E/default.jpg)
![WebRTC in 100 Seconds // Build a Video Chat app from Scratch](https://i.ytimg.com/vi/WmR9IMUD_CY/default.jpg)
![How to Learn to Code - 8 Hard Truths](https://i.ytimg.com/vi/NtfbWkxJTHw/default.jpg)
![I built the same app 10 times // Which JS Framework is best?](https://i.ytimg.com/vi/cuHDQhDhvPE/default.jpg)
![25 nooby Python habits you need to ditch](https://i.ytimg.com/vi/qUeud6DvOWI/default.jpg)
![What's new in Tailwind CSS v3.0?](https://i.ytimg.com/vi/mSC6GwizOag/default.jpg)
![The Shocking State of JavaScript // The Code Report](https://i.ytimg.com/vi/1L2hrG-7i2Y/default.jpg)
![10 CSS Pro Tips - Code this, NOT that!](https://i.ytimg.com/vi/Qhaz36TZG5Y/default.jpg)
![Floating Labels with Tailwind CSS](https://i.ytimg.com/vi/nJzKi6oIvBA/default.jpg)
![Responsive Designs with Tailwind CSS](https://i.ytimg.com/vi/PRY4ALWgS0w/default.jpg)
![Prisma in 100 Seconds](https://i.ytimg.com/vi/rLRIB6AF2Dg/default.jpg)
![Animated Responsive Navbar with CSS - Plus Other Useful Tricks](https://i.ytimg.com/vi/biOMz4puGt8/default.jpg)
![Tailwind CSS Crash Course](https://i.ytimg.com/vi/UBOj6rqRUME/default.jpg)
![Firebase in 100 Seconds](https://i.ytimg.com/vi/vAoB4VbhRzM/default.jpg)
![These Personal Websites are just WOW...](https://i.ytimg.com/vi/S7V0-QvYbdo/default.jpg)