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

[@mayankpruthi9079]

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

[@guttizin]

And i, at friday 3am LOL

[@deamorta6117]

Me, at Saturday 1am

[@type3gaming851]

Wednesday 1 am lol

[@strifeclient]

Thursday 5pm lol

[@oryankibandi3556]

Monday 2.00am

[@NeuralNotes69]

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

[@bafi29]

Or him is a wizard. 2spooky4me!!!

[@bafi29]

Or him is a wizard. 2spooky4me!!!

[@sudhanshushekhar5905]

True as hell brooooo😂😂😂😂

[@alejomakevids]

Spoopy

[@andrewstabeno]

I’m pretty sure I heard him say he is a bot made by Google or something.

[@dhrubanka6197]

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

[@MrKarma4ya]

Checkout tailwind labs channel, great stuff there.

[@rahulsriram6295]

@@MrKarma4ya I second this. It's an amazing channel

[@heelercs]

@Christian Dude Prove it

[@Iamafuckingmadlad]

@@heelercs wanna see it...i can send you there🔪...

[@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)

[@Fireship]

Good point, thank you

[@phronessys]

In tailwind v3 it's gonna be JIT mode by default without purge

[@CaamSerenity]

@@phronessys That is half correct - in v3, JIT becomes the standard and "purge" is renamed to "content". This is done because it better reflects what I outlined in my comment. What you mentioned is the CDN Jit version which uses a lightweight JS approach to pseudo-purge the CSS via an intersection observer. A build chain using the first method will still be preferred though. @Fireship Thanks for the reply :) Btw, keep up the awesome work!

[@phronessys]

@@CaamSerenity I wasn't talking about the CDN version, I was referring to tailwind not using PurgeCSS anymore, mb

[@nowaynoway1798]

​@Christian Dude video is about Tailwind CSS, while your comment is about religion? doesn't make any sense to me. Also your last sentence, "If you reject Jesus Christ, you will end up in hell with unimaginable horrendous punishment forever!" sounds more like aggressive evangelist, eh?

[@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.

[@anandyuvrajsinghsengar170]

Are you a software engineer who develops c and c++ applications?

[@rajnishmishra453]

Bro suggest me what to do after C++ . I mean is there some project that a beginner in C++ can do ?

[@sycration]

@@rajnishmishra453 one of the first things I did was implement a basic register-based VM

[@valsistem]

@@anandyuvrajsinghsengar170 Not software, I am a robotics engineer so I work mainly with hardware control.

[@sajibsrs]

@@rajnishmishra453 Yes, write a OS kernel.

[@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

[@nardu]

Have you put Tailwind on your resumé yet?

[@Mateooyt]

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

[@ianjohnston8057]

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.

[@lukas.webdev]

I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉

[@lloveComedy]

For those having issue following 9:32 and getting an error at hover:rounded-xl, you'll have to add this piece of code in your tailwind.config.js: variants: { extend: { borderRadius: ['hover'], }, },

[@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!

[@ХайёмОдинаев-ж3х]

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!

[@LuminousWhispers11]

For me I always like the idea of being able to do whatever I want. I got the CSS framework I want to learn and use now. Next up is to look for a JavaScript framework to learn.

[@georgejoseph2601]

Never knew Chrome CSS Overview was a thing, love it!

[@jonathansanchez5091]

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!

[@faraonch]

There is only a few people that: 1. understand a topic, 2. are good in explaining and 3. make a video and even explain it!. Brilliant!

[@HeIsZee]

For someone (me) thats neglected their CSS skills for the last 10 years, relearning via trailwind + this tutorial is literally everything I wanted. It removes all the reasons I hated doing CSS in the first place. Great work

[@michaelcarnevale5620]

ya it makes it less tedious

[@liquidrider]

@@michaelcarnevale5620 ironically it's actually more tedious. And you should still have understanding how CSS works before using it. But yes, it could be used to help learn CSS too

[@michaelcarnevale5620]

@@liquidrider why do u think it makes it more tedious?

[@kikianion1]

at first I sceptical on tailwind, but with your video which almost a year ago, now I know I need this lib

[@TheEnde124]

This just feels like writing css in the form of class names. I actually really like CSS. Modern CSS can do so much, and combine that with a preprocessor like SCSS and you have unlimited power.

[@joshk2181]

it's so fucking bad

[@mrSargi7]

Css is cancer

[@TaliyahP]

It is, but it's power if reusability within a component based framework. Applying a bunch of classes to every button in your vanilla JS webpage would suck, but creating a button component and reusing that is easy. And it saves you from having to create a bunch of CSS classes for each variant of said button

[@eriknelson9515]

I had the same thought. Most of these classes are one line of CSS. But then you've got to learn all of these additional workarounds (like apply) when CSS (especially SCSS) already does all this. And honestly, naming things in CSS is not that hard. No harder than remembering all these utility classes. We already have intellisense for class names. So again ... what exactly does this get me except for having to learn things that I can already do just as fast in SCSS?

[@eriknelson9515]

@@TaliyahP CSS, SCSS and PostCSS are all easily reusable in component frameworks. You create a button class, a few sub-classes for variants, and you ... reuse them. What specifically does this give us that SCSS doesn't already do? I'm just still not seeing it. I can't even see that this would save me any time at all.

[@amansetia8655]

tailwind is one of those exceptional things which are just done right which makes them stand out and super good

[@Tom-ow6gw]

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.

[@Nightflash28]

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. :)

[@Yaqins]

Been a frontend dev for almost 10 years. I was there when float was still the standard and i still haven't sold on Tailwind. It's probably good for smaller projects that require fast and minimal setup, but on enterprise level seems like convoluted and would be hell to maintain, especially when you need to reference the element for DOM manipulation in JS. Call me old-fashioned but i love clean minimal html with relatively go readability.

[@moon.trance]

Why would you write css when you can use html classes for each property. Zoomers invented CSS again

[@Yaqins]

@@moon.trance my thought exactly. I mean, i love having utility classes for a quick fix here and there but building the whole layout using utility classes seems a bit over done.

[@MrMudbill]

Whether it's a good pick or not depends on what kind of project you're doing. Like stated, it's most useful for component frameworks, so if you find yourself reusing a lot of the same combinations, you can just wrap them in a component instead. The idea is that the customization is there if you need it without having to dig into manual CSS where you need to follow strict rules to avoid discrepencies like slightly different colors or sizes. I would say that in order for Tailwind to get enough advantages, you need a lot of the helper tools like the intellisense. It enforces that you only use CSS classes that exist, helps you avoid typos and lets you preview what you can pick.

[@jasperdiscovers]

Why? Everybody likes their html tag to look like this: hi. Tailwind is dumb. It's even dumber that it resets everything and nothing out the box just works, unless you add 900 classes to your project which leaves you with MASSIVE code bloat and repeated crap. Even if you parse the CSS through SCSS, you're still left with an unmanageble mess. I hate Tailwind.

[@huyphamuc6372]

No its not. It clearly says in the video that you can create and name your own class and just pick what class from Tailwind to use as you like. So it's still a clean HTML for me, it's just faster with extra step

[@phpsoftwareengineering]

I love the speed at which you present. It’s fast enough that I don’t need to speed up the video. But I wouldn’t want to watch without my morning coffee or I might not keep up. 😆

[@FullMe7alJacke7]

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.

[@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.

[@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!

[@satwikanmol]

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

[@santiagoSosaH]

wow tailwind handling the formating at the div class in a cleaner manner is like going back to html2 and using style

[@alexparker4219]

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

[@sanskarpandey7823]

I was thinking of learning tailwind css and then i saw your video. Youre a ninja

[@adelightfultale9774]

Seriously, JavaScript Mastery and Fireship are the only 2 channels that really makes coding look very cool and interesting. Keep up the good work man!

[@exokristian]

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

[@reold]

Honestly after being a react dev who uses Tailwind, and then switching to Vue. My man, Vite and tailwind setup is just like moving your fingers. Here you don't have to use Craco, like in react

[@nishanthdipali6838]

wt is craco? i use tailwind with nextjs but never had to use craco

[@emmanuelokonkwo6578]

May I ask why you switched to Vue from react?

[@nishanthdipali6838]

@@emmanuelokonkwo6578 ik that's such a ridiculous thing to do

[@abhim6380]

@@nishanthdipali6838 how's react better than Vue. Vue is much simpler to learn and I don't know what makes react better. Please explain

[@tkdevlop]

It's a one time thing doesn't matter too much

[@unopinionated1823]

Wow! Just wow!!! 😮 Your presentation skills are off the charts and your mastery, appreciated!

[@LandsOfDespair]

Thank you for tutorial! :) To be honest, looks like a hard way to write inline css with all of it's downsides and almost no pros.

[@pldcanfly]

Thats my problem with it as well. I guess the having colors defined at one location and the abstract units to keep spacings in order are the benefits here. But then again I can do this pretty easily with scss. I'm not 100% sold yet.

[@deathdefier45]

With tailwind I put together static client projects overnight, what a wonderful resource the best 300 bucks I ever spent

[@jeremy_s]

I've never been a fan of Tailwind, it has far too many drawbacks in my opinion. It's a great way to write incredibly verbose and unmaintainable syntax in your markup, with no clear separation of markup and styling as it's all slammed together in one hot mess. What you're "saving" in CSS, really just gets added back into your HTML. As a good front-end developer, you should be able to create any Tailwind (or any other library) component from scratch. I'm actually far more efficient writing plain CSS/CSS-in-JS against any design requirement, than using any component or UI library as I find myself spending more time reading through their documentation trying to figure out how to do something basic such as changing a color rather than implementing it myself. And instead of learning CSS which is your bread and butter for making things look nice on the internet, you'll be spending more time learning all these Tailwind specific classnames, which is a non-transferable skill-set when the hype train for this is over. Nevertheless, great tutorial, and I'm sure Tailwind has it's use case (solo developer/small project/quick mocks/design inspiration) but in terms of working with a team at enterprise scale it's a pass for me.

[@badalsaibo]

Writing custom is great if you have time. Not everyone I works for had time. So I prefer using a component library with powerful customization.

[@josevalencia4695]

on an enterprise scale you don't create from scratch, that's why exist frameworks and libraries.

[@BosonCollider]

The thing is, Tailwind knowledge transfers over to plain CSS better than pretty much any other framework. Way better than Bootstrap or MUI for example. The classes are small enough that you can tell what the CSS will look like just by looking at the combination of classes, which is not true of most other frameworks. The downside is that the gain of using it by itself to get started is smaller. Personally I like DaisyUI for that reason since it is less verbose but still easy to customize with tailwind classes.

[@garad123456]

"As a good front-end developer, you should be able to create any Tailwind (or any other library) component from scratch" This makes it sound like its similar to bootrstrap or semantic ui etc. But Tailwind doesnt offer ready components. Its just a handier way of writing CSS. Also, the way I have learned CSS is pretty much by writing tailwind and looking at their documentation. Its really good, and I hated CSS before I learned it by this way. Not saying everyone has to use it, but I just dont understand sentences like this.

[@jeremy_s]

@@garad123456 if it works well for you and it's helped you to get better writing CSS, that's great! There's no right or wrong for the various tools you wish to use to compose your app. But for myself making my markup look like an SVG is a hard pass.

[@marcusreimer1971]

One of the best programming channels on KZbin!

[@vighnesh153]

"Put it on your Resume" - Fireship 2021 (12:44)

[@alphareaper1172]

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

[@Hari-ic8ui]

Oh my gosh, THE COINCIDENCE! I was quite recently repeatedly clicking the Discord navbar with great fascination and thinking about replicating it myself since it's just so cool, what with the circle to squircle icons and sliding server folders.

[@arwahsapi]

I've been overlooking Tailwind CSS for some time now, but when Jeff uploaded this video, there's no reason for me to ignore Tailwind.

[@AnirudhIsOnline]

Actually there are tailwind libraries such as Daisy ui which has a bunch of components. Rly like that library ✨

[@lubaaudio]

thanks for the tip!

[@partialcoder6386]

@@lubaaudio dude use flowbite . Its free components are far better than daisy

[@lubaaudio]

@@partialcoder6386 yo thanks for the tip. I'll check it out

[@codeseven9282]

Wasn’t aware of @layer @apply trick. Okay Tailwind is a killer. Best channel for dev.

[@islamibrahim8121]

This coming in while I'm struggling with semantic UI is heavenly. Sadly, I am too far gone.

[@NollieFlipX]

Man you did a great job on this video. Sadly tailwind is not for me, but I'm pretty sure a loooot of people are benefiting from this. We are very grateful! Keep up the good work!

[@outpost31737]

It's not learning as such it's memorising the various CSS classes. I've used it for a few projects but I prefer writing my own CSS.

[@tocube1]

DAMN! all the tailwind essentials packed in 12minutes !!!! you rock bro

[@DrJimmyBob]

Yeah so, yet again, you're providing the tutorial the week I need it.. Love it!

[@me_lvin7068]

Now I'm convinced to use Tailwind over Bootstrap now. Thanks!

[@sholtronicsaaa101010]

Seems a lot like adding styles directly to the styles attribute? Does this not go against keeping the structure seperate from the styling? Does the power come in with custom components?

[@elliottjohnson1753]

I think it really came about as a result of component-driven libraries. "Keeping the styling separate from the structure" isn't as much of a thing anymore -- generally speaking, when we build a UI component, we want it to look the same no matter where in our site we put it. If you're already splitting your JS into components, you may as well concretely-style those components. For example, when working in React, I almost always find myself writing classes that will only ever apply to one div within the component I'm creating. These classes usually have lots of style elements in them that are shared across my app (colors, sizes, spacings, etc). Rather than applying standardized stylings to some arbitrary class that's probably not going to be shared outside the component, it's better to just apply those standardized styles to the component itself. That way, when my friend Bob needs to make some edits to the component, he knows that the (admittedly ugly) group of class names on the component is the full extent of the styling applying to the component. The Tailwind website has some great commentary on this as well. Having used many CSS stacks (Sass and Tailwind probably being my most-used), Tailwind is both the god-awful ugliest and yet the fastest tool I have ever used.

[@ninecrowns7092]

Adding to the previous replies, you can't do pseudo-classes or media queries with inline styles. Also you don't get the excellent design system and tooling that comes with Tailwind.

[@razorflash__]

Writing hover: hover: hover: is such a fun way to write css, especially when it results in multiple lines !

[@victorlongon]

I think tailwind def has its advantages (specially regarding perf), although readability is not that great and creating custom classes to group different utility classes work, but it is not optimal. I like my css to be where the mark is and not in other file. I am huge fan of styled components (from an ergonomics stand point - readability and working with props, etc) it is better than tailwind but it looses on perf since it requires some runtime work, as well as it takes more from you since you don't habe anything ready out of the box. I think in the near future we will be seeing something hybrid, i.e. performant, scalable and quick to get started (like tailwind) and ergonomic and readable like styles components. They are both good approaches but they have some weakness. Nice video!

[@ProtonChicken]

Jeff your videos are so amazing you condense and explain things so well!

[@NomadicJulien]

I wish there was a vscode extension that could hide the tw classes and expand on click

[@boggeshzahim3713]

go write it

[@fadehelix]

You are the person who finally convinced me to give Tailwind a try :P Great job with this video :)

[@sajibsrs]

Same here

[@OfficialTeamSuper]

Great video as always. Concerning dark mode by default its only enabled for color-related classes. So for instance if you wanted use display to hide an image in dark mode you would have to extend it in the config under variants, extend. Then add the class you are extending such as display:['dark']. Then you could do something like dark:hidden on the image to hide it in dark mode. You can extend any utility to be able to trigger changes on dark mode by extending it via the config.

[@eros_sore]

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

[@fatgezimbela7272]

Love how you-tubers can create a billion dollar company site in like 30 mins or less and im here just enjoying the ride.

[@cyberflaw_]

Tailwind + IntelliSence is the holy grail for frontend styling

[@raymondmichael4987]

I stood the whole time, just to appreciate and learn something; I love and used tailwind but even so, I learned something new today. Greetings from Tanzania 🇹🇿

[@Dorumin]

I'm still not sold on the class name bundle, dog. Craco seems cool though, but I usually avoid create-react-app The grouping system also seems rather inelegant

[@Dorumin]

@UCKBxE8Lq_HHrpoEQ5GEgp3Q Yeah, I'd hate to be the one having to use DevTools to debug an app using tailwind. I'm already annoyed enough when I have to deal with hashed class names (nevermind minified), so

[@Dorumin]

What the actual fuck is that @-, the guy deleted his comment?

[@arwahsapi]

@@Dorumin What did he write?

[@Dorumin]

@@arwahsapi Something about the class bundle absolutely being as ridiculous as it seemed and being what web development was made fun of (I'm assuming changing every few years arbitrarily, and in this case ending up basically incomprehensible for onlookers)

[@sazaraki]

@@Dorumin During dev, the class names are not hashed. In devtools you can add/remove regular tailwind classes and see the changes. It really speeds up debugging or creating complex sets.

[@rkcoder]

By far one of the best coding channels I've come across, if not the best for consistent quality uploads!

[@starkindustries4406]

time spent setting up the project >>>>>>>> time spent actually building the project

[@blockhead9050]

You got my attention when the "subscribe" button glowed right when you were talking about it

[@bajiraosingham9495]

Might be useful for some backend only developers I know who don't know anything about CSS but still get tasks that require some design related stuff. But I prefer the normal way. And if you're experienced front end developer you'd optimize the css.

[@ishananaguru]

tailwind is for those who know css, lol!

[@discoRyne]

"Optimize the CSS" what does that even mean? lol

[@melvins126]

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

[@grzegorzniedzielski6885]

IMO Tailwind is great for prototyping, fine for small projects but I can't imagine using it in something bigger with such tight coupling of markup and styles.

[@ishananaguru]

tailwind is for components based websites... if you write your components well you won't have a problem applying tailwind in bigger projects

[@tuananhdo1870]

Tailwind is the only framwork that scale for big team. With normal css, you end up with conflict css

[@grzegorzniedzielski6885]

@@tuananhdo1870 big team does not need to relay on tailwind as it mean to scale easily, even small companies have style guides that define and support not only css class and file structure but overall elements and visuals pool.

[@faraonch]

OMG, the utility prop to create the class on demand. I thought why am I watching this video since i know tailwind. My life is great again.

[@nexxai]

Love the video; just curious why you used 'rounded-3xl' instead of 'rounded-full' to ensure that you'd get circles at any size/scale?

[@hilalarsa8925]

rounded-3xl will set n rem/px to the element, and full will made it 100%

[@nexxai]

@@hilalarsa8925 Yeah, that's what he wanted: 100% (a full circle). @10:17 He goes from "rounded-3xl" (the not-circle circle) to "hover:rounded-xl" (rounded-corner square) To make sure that the not-circle circle is /always/ a circle, he should be using rounded-full (e.g. "rounded-full hover:rounded-xl")

[@jacobbelanger2648]

Maybe it's a transition thing? I'm not sure how it would transition from % to rem. I could be wrong tho

[@sadhlife]

@@nexxai it is probably because of transition duration. rounded-full would animate it from 10px or so to 9999px, essentially making the animation useless

[@hamitaksln]

@@sadhlife Right. If you try with rounded-full you will see that transition is not smooth. Instead of rounded-full you can use rounded-[50%]

[@1234minecraft5678]

just used tailwind as css-newbie and has been great so far, bootstrap had me nearly give up.

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@ninecrowns7092]

Using the @apply directive in Tailwind seems like an anti-pattern to me, especially with React where the functional component itself already abstracts away most of the complexity. Might as well write normal CSS at that point.

[@kylclrk]

The whole library feels like an anti-pattern...

[@ninecrowns7092]

@@kylclrkFair enough, it's not everyone's cup of tea.

[@SogMosee]

yeah the shits jank. Another hype train I won't be boarding

[@badalsaibo]

To each his own. For React, I prefer MUI with customization.

[@souhailDevv]

your videos are the best, the quality, the tutorial, the design... everything is so perfect with you

[@BenedictGS]

0:57 that couple pixels left align box throws me off balance

[@BenedictGS]

Love your content tho

[@tinolm6202]

Your awesome you somehow manage to make all your videos interesting for me please don't ever stop uploading

[@chepossofare]

Honest to god, i still think that using standard CSS (or even SASS) with a decent internally standardized set of css vars is more than enough and tailwind is just a more complex bootstrap++. It makes styles not standard for a css dev and html more polluted than ever. Good tutorial tho

[@trentbosnic]

If you want to future-proof yourself as a front-end developer, learn CSS in-and-out before you touch a library like Tailwind.

[@chepossofare]

@@trentbosnic exactly because i know how to write decent css i think that tailwind is not that useful.

[@trentbosnic]

@@chepossofare Yeah, I've tried it on a few projects, it felt like my hands were tied. I have no use for it whatsoever.

[@fantasypvpvideos]

​@@trentbosnicI didn't try it yet, still from everything I've studied about it, I think I'd probably feel the same.

[@trentbosnic]

@@fantasypvpvideos I’ve used it in a number of projects through work now - still don’t like it and would way rather write css myself. Constantly having to google how to write CSS I already know in tailwinds syntax. And there’s heaps of stuff tailwind can’t do using the classes alone. Shit library

[@no-name2031]

11:38 I don't know about you but that move activated the spaghetti code alert for me

[@yaycupcake]

The thing I dislike about Tailwind and other similar tools is that it makes it harder for the end user to overwrite and customize css for specific elements. I learned css in the first place because I have astigmatism that makes it very hard to read dark theme sites, and I'm also extremely nearsighted, meaning the font size on most sites is not good for me. Zooming in isn't an option either because I don't need the UI bigger, I just need body text bigger. But sometimes there's elements with like a billion different classes and I don't want to change everything on the page to have a font size of, say, 20 instead of 16, or whatever. I just want to change the main text. But sometimes (not always, but I've seen it quite often) there's not even any semantic named classes at all. Nothing to identify element A from element B in a completely different part of the site, serving a completely different purpose. So I can't just change element A without affecting element B, unless I use extremely roundabout selectors like body>.container>div:nth-of-type(2)>div or whatever. I've had to do this because of lack of semantic classes. Semantic classes don't *only* help developers but they also help the end user in accessibility. In your demo code, you have which leaves me with no real way to target this element and this element alone. I do understand this is just a demo, but again I've seen this kind of thing in production sites. I would really love to see if there's a way to, for example, write the code like this, but have it compile down somehow into css within a class for that given element that those helper classes get applied to. I do like the @apply feature a lot and I think that's a great way to use it because it leaves a semantic class. But I really just can't get behind using those classes outright in the html (or jsx or whatever). But for now, while tailwind and similar stuff seems to make life easier for devs, it makes it harder on the technically minded end-users who have accessibility needs, and are just trying to do what they can to access content. I don't need larger sidebar text but I do need larger body text. Sometimes both are the same element with shared helper font size classes... And I can't do anything to adjust this for myself, locking me out of viewing so much content on the web. I really wish there was a better solution, but for now I think there's not (at least that I know of)... If there is a way to have the best of both worlds (easy source code but semantic production code) that would be great and I'd love to know about it. But until then I can't really say I like this, because it makes my everyday browsing of the web just a worse experience, sadly. If only developers at least added a semantic class to things in addition to these helper classes, there wouldn't even be any issue. But a lot of times (like in your demo code) there sadly isn't even *any* semantic class names on that element.

[@robloxiansexclusive1781]

🤓

[@dx497]

Man your channel has taken a place in my heart love you guys ❤

[@lemonsavery]

Question for some senior dev: Isn't this basically just giving the powers of css to the html 'style' attribute? Like, in the case: ``` hello ``` Here, styling is done using the style attribute, instead of class defined css styling. I imagine for tailwind, the styling attribute would be replaced by something like: ``` hello ``` Although this also gives powers exclusive to css: ``` hello ``` Is my comparison valid? Is this a return to heavy use of the html styling attribute, but in a more powerful and cleaner form? I have ~1y full stack web dev experience.

[@ishananaguru]

lol no

[@badalsaibo]

You comparison is valid. It does more or less like inline styles with added benefits for some custom solutions out of the box like hover, dark mode, shadows etc.

[@acdigital5761]

From hassle free naming system to multi-browser support, Tailwind is perfect on every level. Im a beginner in Web Development and i find Tailwind way easier than plain CSS.

[@cevxj]

there's even easier things available that have been around longer, like basscss and purecss. Just add the url to the head.

[@samisbgh6253]

👶: Bootstrap 👦: Tailwind 🤴: Styled Components 👼: VANILLA CSS

[@schallrauschberlin9292]

👼👼: SCSS

[@infureal]

Good tutorial, sir. I have some tips: - rounded-full - makes corners COMPLETE rounded. When it's with fixed value, it can produce some unexpected behavior. - transition - rather than transition-full applies transition to "standard" props, except "special" like transform

[@rexlManu]

He used rounded-3xl because of transition. rounded-full adds border radius 9999px and transition doesnt know how to handle that. A nice hacky way to make such animations

[@querela92]

Don't be offended and I have not yet worked with tailwind but is tailwind not almost like the HTML style attribute? Sure, you can slightly group multiple single style definitions in a class but you "bloat" you class attribute instead of your style one. You basically move half the style definitions into your HTML when you could have them all in your CSS file with selectors. (Other than that, great video.)

[@querela92]

@@pixsa some ideas might be browser specific prefixes, and some smaller already defined style set, some additional tooling. But yes, maybe preference. Hype?

[@SpencerWhiteman]

I'm having an issue while creating the custom CSS class. It's saying The `hover:rounded-xl` class does not exist. Except my hover class for the text-white and bg green are working completely fine. What is up with that?

[@elkekegrande4816]

I also have the same issue. I did try to enable border in tailwind config file with no success ! I don't like the way i did it but I attached another style.css file to the compnent then defined a another class:hover and set the rounded-xl property ... .test:hover { @apply rounded-xl; }

[@SpencerWhiteman]

@@elkekegrande4816 Hey thanks man!

[@otisprogramming2437]

Had this issue too, fixed it by adding borderRadius: ["hover"] to my tailwind.config within the variants object variants: { extend: { borderRadius: ["hover"], }, },

[@leonardopillay4200]

Every video I watched did not convince me but yet again Jeff has convinced me of the correct way in living life.😂

[@lukas.webdev]

😄

[@janosmarta8258]

I use tailwind with vite and svelte or react just because together they seems a stack like JAMStack.

[@analisamelojete1966]

These tutorials are amazing. I can watch a 10 hour video loop of this.

[@JonathanRose24]

I’m still incredibly turned off by the class name soup. I’d imagine it would become quickly difficult to maintain and conflicts in styling will be obfuscated pretty easily making for a frustrating debugging experience. I see tailwind as a tool for a POC with a short planned lifespan. I don’t see how it can work in a larger app with a long term planned life

[@bryanleebmy]

You can use the @apply directive to refactor and extract Tailwind CSS classes into your own custom classes. This provides the benefits of rapid development and customizability while also letting you build a stable class system in the long run. It's basically like building your own highly customized Bootstrap.

[@thinkingdev102]

Conflict? Just combine all classes in current and incoming. VS Code plugin will let you know the duplicates.

[@uziboozy4540]

You don't know much, do you?

[@espressothoughts]

You’re providing criticism without doing your due diligence. Take a deeper dive before you do this man or just read the comments above me

[@querela92]

@@bryanleebmy mhh. But this seems more likely to be used in prototypes. If I build my own bootstrap, I will later probably do this with custom class names and not by enumerating each tailwind class. And then there are the css preprocessors, scss etc, that I might also be able to use for style merging, if I'm not mixing things up?

[@sp3cterproductions]

We use tailwind across all of our projects, even our React-Native projects. It's really a great tool.

[@blazi_0]

Wow I didn't know that u can use it for react native too. How does that work ?

[@sp3cterproductions]

@@blazi_0 - Setup isn't really that much different if you're used to working with RN and tailwind. There are limitations though, certain styling options that are available for web-apps are not available in RN. Components like View, Text, etc. have a style prop and you just pass in the tailwind values in a similar way to a web-app. For example: - import => import tw from 'twrnc'; - apply => style={[tw`flex flex-row justify-between items-center h-8 p-2 w-full bg-red-900`]} Note: The above is post tailwind setup. One way to circumvent a lot of the styling limitations is to just build a web-app with support for mobile. Then using WebView to render your web-app. This has performance limitations though. To each his own.

[@ishdx9374]

so this is basically CSS but you save 2 keystrokes

[@marcelomarchetto7373]

Someone finally said it!!!!!

[@fantasypvpvideos]

And there's a lot more jumping around different files involved.

[@linkeking]

Oh and you fuck up your markup! remember that.. :)

[@VaibhavShewale]

damn, this looks so clean,confusing, awesome and hard

[@DerLuukee]

Do you recommend putting huge classes in a smaller class by using @apply or keep the code small by splitting the code base into multiple components? Thanks for your videos btw, love them!

[@Fireship]

I would recommend using multiple components for most things, but sometimes shared utility styles work better as CSS classes with apply.

[@yt-sh]

@@Fireship this was awesome!

[@DerLuukee]

@@Fireship awesome, thank you very much!

[@scootndute579]

I really dont understand the advantage of making tailwind css classes rather than just a way for it to compile its utility classes into a normal class, which in a way is just abstracting making "normal" classes.. i could see components getting equally as busy or confusing (from a naming and use perspective) as making your own CSS classes

[@shayan-gg]

For those who are unable to install Craco, its because it doesn't support React v5+ use alpha Craco 7 npm i @craco/craco@7.0.0-alpha.3

[@someguyO2W]

This was a good tutorial. Showing different approaches to using tailwind. I liked it.

[@GKNaidu-hb5zv]

came with speed of light but due to network acting as medium light got diffracted

[@Apollo1_]

Gonna use that line with my girl next time

[@GKNaidu-hb5zv]

@@Apollo1_ Lol

[@valtism]

As someone who has used Tailwind for over a year now, I generally don't use @apply. I feel like in the case of this video it makes more sense to have the class names encapsulated in the SidebarIcon component because they are only being used there. Right now they're just being shifted to another file that removes the major benefit of Tailwind - co-located markup and style.

[@roeltz]

I'm giving you thumbs up because you're an excellent content creator, but I still despise the utility class approach to CSS. I'm OK with the idea of using utility classes/mixins with preprocessors, but leaving the HTML out of it. Depending on others' idea of a style language (utility classes, CSS-in-JS) is to deprive oneself of the richness of real CSS for actually nothing that a little discipline and a good naming scheme can't already accomplish.

[@absbi0000]

Depends if speed is or is not on the line.

[@bicunisa]

"Blah blah blah, whine whine, more cry, non-sense explanation to self."

[@rand0mtv660]

I haven't tried Tailwind yet, but I do see the appeal of utility only approach. Personally I haven't tried going full utility only yet. So far I found that I like a nice mix of discipline and naming scheme (BEM) and a healthy dose of utility classes for more generic stuff, especially for margin/padding. This approach allows me to be fairly consistent and build UI fairly quickly (under the assumption that UI designs I get are somewhat consistent). Of course naming scheme becomes way less important if I go for something like CSS Modules, but I still have utility classes in that case anyway.

[@discoRyne]

@@bicunisa 100%

[@martinsouto8818]

Yes. CSS > Tailwindcss.

[@mianala]

I wasn’t interested in tailwind before but now I’m 🤯

[@bijianwu5124]

great content! thanks, by the way, is Tailwind CSS suitable for a medium to big size project?

[@johnconnor9787]

This is just a bunch of classes which you can use anywhere

[@partialcoder6386]

yup it is used in enterprise projects too. Its just a css library with very core features

[@bijianwu5124]

thanks for answering it!

[@lukas.webdev]

100% yes... 😉

[@danielvega646]

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.