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

#webdev #css #tutorial

🔗 Resources

📚 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

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

[mayankpruthi]

I had been procrastinating learning tailwind for so long. Never thought I’d learn it in 12 mins on a random wednesday at 2am lol. Great content

[NeuralNotes]

Okay so I'm convinced this guy collab with fbi to provide us content we often searching for

[dhrubanka]

I almost gave up finding a Short and Neat Tailwind CSS tutorial but Here it is.
Thanks Universe

[CaamSerenity]

The purge mode is essential for this video, since you specified JIT mode. Without a purge config, your resulting CSS will be empty (or really just the normalization). Your styles would be purged. The remark is valid though if you use AOT mode. (JIT => Use purge config to only include the styles needed; AOT => Build ALL classes and remove those that are unused)

[valsistem]

Tbh Fireship, I love your videos so much I watch them as a C && C++ Dev. I have no use for these, but they're just wonderfull to look at.

[EstebanCodes]

Your tutorials are something special as I am able to follow them and learn while I am in my lunch break without my computer

[shixxor]

There are so many tutorials and guides out there for everything you can imagine, but your videos are by far the most efficient in conveying useful information per time of them all. Big kudos to you, keep it up, thanks!

[jonathansanchez]

I really just started learning about TailWindCss and this is the best thing I've ever experienced. FrontEnd used to be so hard for me because I couldnt put what I had in my head, into code with CSS, but with this, its so easy. For some reason, bootstrap never made sense to me, but this does - thank you!

[Mateooyt]

Yo! I started learning tailwind css yesterday. 100% accurate video.

[ianjohnston]

Really grateful for your channel in general. I've learned so much over the past few weeks watching videos from you. You're a seriously great teacher.

[vladandreit]

Hope this channel gets big. I learnt a lot in the last 2-3 years. I really love videos about new technologies and how to use them. Keeps me connected.

[fukfyko]

This one was super interesting and useful. Even so I love crafting with CSS, when it comes to production level, my experience suddenly becomes a slow agony. Most popular solutions were not for me (to name a few: Material, Bootstrap, CSS in HOCs, ...), so I left with SASS/BEM. Despite the growing popularity of Tailwind, I couldn't find time to look at its side, but after another tutorial about it FROM YOURS, now I have changed my mind and will try it on my next project as well ( I guess it will be definitely worth it ).

Apart from that, I want you to accept my gratitude for all things you are doing in this channel. In addition to helping those who are interested in learning to go with web development carrier (at the moment the most popular and demanded one... or not), you also promote the industry itself forward by popularizing little-known projects and most importantly sharing your opinion and experience with community.

So yeah, like and subscribe is unambiguous and mandatory!

[alexparker]

this is personally the one I most awaited for ❤️. less gooo 🔥🚢

[Tom-owgw]

Great video, clear and concise! Been meaning to look into Tailwind for awhile now Looks interesting, but I'm not quite sold yet. The biggest issue for me is how it muddies up your HTML/JSX. It's also yet another layer of abstraction to learn and another link in your toolchain that can break. The benefits over plain old CSS or styled components don't seem worth it personally, but I'll have to try it for myself before judging.

[Nightflash]

I've been working with Tailwind for the past year and I don't want to work differently any more. I kept nudging my friends to also use it, but most of them were not ready to make a switch. Thanks for this video, I will forward this to them and hope that this will tip the scales. :)

[neoney]

Even though I’ve been using Tailwind for some time, I still decided to wach this, and I’ve learned about the group utility! Thanks!

[FullMealJacke]

The pace, information, and flow of this entire video is on point! I learned more in this video that feels like "the right way" than I have on many other videos.

[satwikanmol]

I am starting to use tailwind tomorrow on a project,
And here you got me a tutorial thanks fireship

[eros_sore]

Thanks to this tutorial I tried implementing tailwind in my Svelte project and fell in love with it, thank you very much!

[melvins]

You make things super simple and understandable. I love it. More content please.