Fireship

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