Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar
Fireship
@fireshipAbout
High-intensity ⚡ code tutorials and tech news to help you ship your app faster. New videos every week covering the topics every programmer should know. The original home of #100SecondsOfCode #TheCodeReport and #CodeThisNotThat. Created by Jeff Delaney. Want more Fireship? 🗞️ Newsletter – https://bytes.dev 🧠Courses – https://fireship.dev
Latest Posts
No results found. Try different keywords.
Video Description
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
You May Also Like
CSS Dev Must-Haves
AI-recommended products based on this video
NEXPOW Car Jump Starter,Car Battery Jump Starter Pack 1500A Peak Q10S for Up to 7.0L Gas and 5.5L Diesel Engine12V Auto Battery Booster,Jumper Cables,Portable Lithium Jump Box with LED Light/USB QC3.0
Firefly Variety 8 Pack - Fire Starter Accessory for Swiss Army Victorinox Knives (Neon Green-Yellow Glow)
9-in-1 5000A 150PSI Car Battery Booster Jump Starter with Air Compressor (All Gas/9L Diesel), Portable Car Battery Booster Pack, Safe Durable Car Jump Starter with Extended Jumper Cables, Glove, Light
6000A 160PSI Car Battery Booster Jump Starter with Air Compressor and Air Blower (All Gas/10L Diesel), Portable Car Battery Booster Pack, Safe Durable Jump Box with 800 Lumen Light/18W Fast Charge
The Book. The Ultimate Guide to Rebuilding a Civilization - Inspirational Science Books for Adults - Unique Artifact - Knowledge Encyclopedia with Over 400 Pages of Detailed & Catchy Illustrations
The Ultimate Book of Random Fun Facts: Over 1000 Interesting Facts And Trivia Quizzes About History, Science, Sports, Animals, Space and Anything In Between!
