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

As a front end designer and developer I still don't get the appeal of Tailwind. It seems to be reinventing the wheel with SCSS concepts and inline styles (with polluting). I think it can be a good tool for non-designers or prototyping but I think the goal can be achieved by standardising a design system that doesn't overcomplicate styling. I mean, do you really want to have your backend devs doing the styling for a UI/UX/brand?

Does anyone know the theme he uses in this video?

Didn't know we could build a part of Discord in a few minutes.
Love you so much !!.🥰

For people having issues with the setup try following the official tailwind guide exactly instead.

Seems to me like css, still ugly but another kind of ugly

which type of extension are you using that shows the color like darker >>>>>>>>>>

best tailwind vid iv seen so for thanks for explaining the classes as you go.

when I type npx tailwindcss-cli@latest init it doesn't work what should I do

My ultimate problem with Tailwind and why I stopped using it for SCSS + BEM:

1. The argument that it makes development quicker relies on the developer spending a lot of time and practice to actually remember all the different utility classes and the nuances of each class. This is the ultimate problem and is why I never even bothered with Bootstrap for example. I literally cba. I got bigger things to think about as a dev and CSS works fine. If you have been writing css the traditional way since forever, learning all these classes is a chore. It's just so much quicker to learn CSS and ideally BEM naming conventions once and then never worry about it again. Tech comes and goes, I'm sure this will be true with tail wind and css has proven to stick around for the long run.

2 .The additional tech weight on the project to not only setup tailwind but then to maintain it as it naturally evolves and changes. I found it's often just a burden.

3. Tailwind for react components is actually a really cool thing, this said, if you are making packages of components that are designed to be shared across multiple projects with different brands, it falls apart completely. Nothing beats simply swapping out a style sheet in this regard.

4. If you intend to hire a dev to work on a project and they don't know tailwind, you are screwed. This is another ultimate problem with any kind of library or framework. Guaranteed every web developer knows classic css. If you make a good CSS system for your project, it's infinitely easier to get a dev up to scratch with it.

5. It simply makes HTML files very difficult to understand given you literally have to scan word by word to understand it, where as a single descriptive human readable class name is instant.

6. If you don't have strict design to follow sometimes it's really useful to sit in the browser dev tools and play around that way. With descriptive class names, you can make your changes and just copy it over to that class in one go. Obviously with tailwind this is no longer possible and so using your eye becomes a very slow process and this is ultimately why it will never work for someone like me. It's the fine grain detail stuff that traditional CSS does so well. Tailwind basically makes this such a sluggish process that serious designers will struggle with massively.

Imo, tailwind is great but personally I've only ever found it useful in super quick prototypes and what not, mainly projects I don't care about in the long run. For production stuff I just find it offensive tbh lol and I avoid it at all costs, just like any third party thing for that matter, if I can get away with the time tradeoff. In an ideal world, I have one frontend framework like react, one single file for web pack, one directory for scss and one directory for js. Rarely do I opt for anything outside that standard.

tailwind is a bless for the backend programmers that still worry a bit for frontend presentation! like I don't want to do ugly things but don't want to overthink about css and designs and effects neither. Learning tailwind unlocks you the superpower to unlock neato libraries that will fulfill your nerdy fantasizes about fancy sophisticated websites.

So... instead of writing css as is and having a clean, readable html, you have to partially re-learn css and move it to html while making a total mess of it... yep, makes sense, I'm sold! ;-)

Learn CSS instead guys :s

Your tutorials have really help me get into code, thank you !

thank you

I WILL BE THE BEST TAILWIND CSS CODER ...BETTER THAN ALL FROM MY COMPANY

So cool, made something good in ONLY 12 mint , that no one can make In 30 mint

tailwind is trash

How does he get the icons like the little light bulb ?

Instead of typing so much for one thing, I'll just create a damn class and reuse it everywhere.

I don't get it. I can build this perfectly without tailwind in straight vanilla and actually achieve the exact same/even smoother animations. I have webapps that have way more fluent animation than most all these extra libraries. Seriously smoothness/functionality comes from being closer to the DOM.

Thanks for the awesome introduction to Tailwind! I've been hating on the Tailwind syntax since forever and hear people mentioning good things about it but have never seen anyone give any convincing reason why it's better than just writing plain css. Following your step-by-step example to build a functional UI gives me some insight on why people enjoy this workflow.

Overall I'm still not convinced that this is any better than just writing css:
- It bloats the template with numerous class names, and I also lose the semantic meaning of the element I'm trying to style (we have two divs next to each other, each with 10 tailwind classes. How do I know which one is which?)
- The design system part is nice, but it can be recreated with scss/css variables. Same goes with dark mode etc.
- When the classes gets too much to handle the recommendation is to use @apply, but then how is it different from writing my own CSS in a semantic class? It's even better with plain CSS since I don't have to buy in to a custom DSL to create it.
- Some people mention stripping unused CSS from the project as one of the benefits, but nowadays our tooling are good enough to do this with plain CSS already. Svelte warns us when we declare a class but not use it in the same file by default. Most modern frameworks (other than React since it's unopinionated in styling) allows us to scope our css to the component level so there's no risk of accidentally using a class outside of the component scope.

If I want a preconfigured, looks good without much effort type of style, I'd use a preconfigured minimal classes style of library like picocss instead, much cleaner template that can be extended with plain css without any need to use a custom DSL.

your github source code wont run for some reason

Tailwind is a backward move in technology

Как всегда, отличная работа

uhh, still don't like the idea of css in js.
Imagine doing something really difficult in css, and struggling with
it because it's just tricky to get it right in pure css. and you have to experiment and refactor many times still not being sure about final solution.

How long would it take to do it through tailwind?

And someone will say: Oh but you might do it in pure css and at the end when you get it right translate it to tailwind...

but again. What tailwind really gives me?

I think this is just another tools for developer to stay away from engineering and we are talking about simple stuff because dark mode is not difficult to do your way, you just add or remove "dark" class from body and have cascading style overriding few colors here and there on top of your standard style... that's just and example.

Are things like that really difficult?

Why people are so addicted to delegating thinking. People desperately want someone else to thing for them.

Additionally:
I always thought that css is designed to really separate styles from page structure. You should have html and css to style it.
It kinda feels weird when you read html and you know what is going on on the style level. Something is off.

And I see this as an abstraction and every abstraction comes at a price. And even watching this video it's clear that "this" can be done here but not "here" and the "trick" is...
Why do I need to know all of this? and remember about those artificial limitations when doing my styles?
Like if css was not painful enough already.

I'm waisting time, I'm not gonna change world commenting on YT for sure ;) but still

Still good video, good job mate

grate stuff! one note: i think much better to use vite as development server

the installation is old fails with dozens of warnings and error due severe vulnerabilities. It is better to find other tutorials that work

Why didn't you have to do: import 'React' from react; in your Sidebar component?

I do the same and get 'Can't find React' for <div> and for <p> in my return function.

Jeff, you are the tailwind of tutors. Your work is masterpiece.

It's crazy that a lot of this stuff now can be done so fast with AI

I'm here in 999k Views

What happened to bootstrap 😢

absolutey based!

Yeah tailwind is cool but regular css is much efficient and in this example it is so easy to do it with regular css

Is it just my screen or Jeff's using lightmode on tailwind!!!

@apply to the rescue for your ugly code

Just perfect.

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.

"Most hiring managers recommend you click the subscribe button"🤣 you're just awesome!

Sadly, there is no red button below the video.
But fortunately I am already subscribed

this is the ultimate tutorial for somewhat experienced people, for beginners like me you go way to fast. edit: great video though

Can you please make a detailed video on chrome dev tools. Really loved the CSS Overview

Wow! Thank you for this. The productivity tips like apply were super helpful!