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

2 жыл бұрын

And i, at friday 3am LOL

@deamorta6117

2 жыл бұрын

Me, at Saturday 1am

@type3gaming851

2 жыл бұрын

Wednesday 1 am lol

@strifeclient

2 жыл бұрын

Thursday 5pm lol

@oryankibandi3556

2 жыл бұрын

Monday 2.00am

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

@bafi29

2 жыл бұрын

Or him is a wizard. 2spooky4me!!!

@bafi29

2 жыл бұрын

Or him is a wizard. 2spooky4me!!!

@sudhanshushekhar5905

2 жыл бұрын

True as hell brooooo😂😂😂😂

@alejomakevids

2 жыл бұрын

Spoopy

@andrewstabeno

10 ай бұрын

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

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

@MrKarma4ya

2 жыл бұрын

Checkout tailwind labs channel, great stuff there.

@rahulsriram6295

2 жыл бұрын

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

@heelercs

2 жыл бұрын

@Christian Dude Prove it

@Iamafuckingmadlad

2 жыл бұрын

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

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

2 жыл бұрын

Good point, thank you

@phronessys

2 жыл бұрын

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

@CaamSerenity

2 жыл бұрын

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

2 жыл бұрын

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

@nowaynoway1798

2 жыл бұрын

​@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?

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

2 жыл бұрын

Have you put Tailwind on your resumé yet?

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

2 жыл бұрын

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

@rajnishmishra453

2 жыл бұрын

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

@sycration

2 жыл бұрын

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

@valsistem

2 жыл бұрын

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

@sajibsrs

2 жыл бұрын

@@rajnishmishra453 Yes, write a OS kernel.

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!

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'], }, },

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

11 ай бұрын

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

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!

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.

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

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.

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

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

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!

@theraven.4

2 жыл бұрын

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.

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

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

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

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.

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

2 жыл бұрын

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?

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!

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

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

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

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

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!

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

2 жыл бұрын

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

@Yaqins

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

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.

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

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

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!

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

2 жыл бұрын

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

@emmanuelokonkwo6578

2 жыл бұрын

May I ask why you switched to Vue from react?

@nishanthdipali6838

2 жыл бұрын

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

@abhim6380

2 жыл бұрын

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

2 жыл бұрын

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

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

Previously i though that custom css is the best way to write css but Tailwind is really awesome 🔥🔥🔥 thank you so much ! Awesome content 🤘

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. 😆

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

2 жыл бұрын

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

2 жыл бұрын

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.

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

2 жыл бұрын

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

2 жыл бұрын

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.

Dude you did this for me haha I was literally looking for this right now. Not at all expecting the fireship channel cuz I knew you had nothing yet... damn great timing

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

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.

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

Thank you so much for explaining Tailwind CSS in such a simple and beautiful way.

I was waiting for this for so long. Thank you so much. ♥🔥🔥🔥🔥🔥

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.

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

@boggeshzahim3713

2 жыл бұрын

go write it

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

Fireship at it again. Thnx for this great video about tailwind. I was sceptical at first whether to use it or not seeing that it has a lot of similarities to bootstrap. But this video introduced new things about tailwind I didn't know before. Now I finally using tailwind.

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

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!

Wow, amazing video, my team started to use it and I wanted to know how it works and why it's so useful, thanks a lot for this tutorial! 😁💯

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

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.

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

2 жыл бұрын

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

2 жыл бұрын

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

@trentbosnic

2 жыл бұрын

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

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

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

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

2 жыл бұрын

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

@tuananhdo1870

2 жыл бұрын

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

@grzegorzniedzielski6885

2 жыл бұрын

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

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

2 жыл бұрын

@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

2 жыл бұрын

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

@arwahsapi

2 жыл бұрын

@@Dorumin What did he write?

@Dorumin

2 жыл бұрын

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

2 жыл бұрын

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

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

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

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

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

2 жыл бұрын

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.

video quality is next level, superb as always

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

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

@BenedictGS

2 жыл бұрын

Love your content tho

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

2 жыл бұрын

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

@ninecrowns7092

2 жыл бұрын

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

@SogMosee

2 жыл бұрын

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

@badalsaibo

2 жыл бұрын

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

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

Thank you for the great video Fireship! Really needed this.

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

2 жыл бұрын

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

@nexxai

2 жыл бұрын

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

2 жыл бұрын

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

@sadhlife

2 жыл бұрын

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

2 жыл бұрын

@@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%]

Excellent video, love the way you cover topics!

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

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

2 жыл бұрын

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

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

@Apollo1_

2 жыл бұрын

Gonna use that line with my girl next time

@GKNaidu-hb5zv

2 жыл бұрын

@@Apollo1_ Lol

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!

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

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

2 жыл бұрын

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

2 жыл бұрын

@@elkekegrande4816 Hey thanks man!

@otisprogramming2437

2 жыл бұрын

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

so this is basically CSS but you save 2 keystrokes

@marcelomarchetto7373

2 жыл бұрын

Someone finally said it!!!!!

One of the best programming channels on KZread!

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

Tailwind + IntelliSence is the holy grail for frontend styling

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

2 жыл бұрын

lol no

@badalsaibo

2 жыл бұрын

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.

Just the video I was looking for. Thanks 😁

Amazing video as always. Totally agree, tailwind is the fastest for custom styling. For standard, I would use a component library, like material-ui (with emotion) since it has already a lot of functionality attached. For simple projects, bulma is very nice as well.

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

2 жыл бұрын

tailwind is for those who know css, lol!

@discoRyne

2 жыл бұрын

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

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... 😉

explained so nicely in short and sweet manner thanks you sir :)

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

@sajibsrs

2 жыл бұрын

Same here

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

Жыл бұрын

🤓

Is it just me or is anyone else not able to even get past installing dependencies because they conflict so much?

@lukas.webdev

Жыл бұрын

I just posted a Tailwind CSS Tutorial for Beginners (in 2023) - this should be exactly what you are looking for... 😉

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

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

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

2 жыл бұрын

Depends if speed is or is not on the line.

@bicunisa

2 жыл бұрын

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

@rand0mtv660

2 жыл бұрын

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

2 жыл бұрын

@@bicunisa 100%

@martinsouto8818

2 жыл бұрын

Yes. CSS > Tailwindcss.

Everytime i see a tutorial or some kind of recommendatios for css frameworks, i dont find any reason why i should wrap my brain around a system that uses 2000 classes for a process, that maybe takes longer in vanilla, but isnt as appealing as creating my own Project and give my code a structure that i have my own personal control over. I mean, thats why i learned CSS for, or am i wrong? Am i the only one who gets a headache when i try to learn anything about hundrets of those js libraries, css frameworks, cms systems or a sea of code editors you have to study thousands of Pages of Documentations first for every single one of them to know how to even start coding…. Maybe im to old for this, idk…

@tonylion2680

2 жыл бұрын

You are not the only one. But there's no need for you to be checking constantly for new practices or frameworks, just check whenever you really need it.

@OFfic3R1K

2 жыл бұрын

Seems like you're raising an unpopular opinion, but I'm totally with you here. Sure, Tailwind may be convenient for front-end devs who are afraid of CSS (seen too many of those lately) and are building something non-complex but as soon as video started with animations the code became unnecessarily complex. And we didn't even touch on media queries! What gives?

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

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

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

2 жыл бұрын

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

@yt-sh

2 жыл бұрын

@@Fireship this was awesome!

@DerLuukee

2 жыл бұрын

@@Fireship awesome, thank you very much!

@scootndute579

2 жыл бұрын

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

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

@schallrauschberlin9292

2 жыл бұрын

👼👼: SCSS

what a superb tutorial. extremely well done.

Made this nav with CSS and still learn something, thanks ;)

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

2 жыл бұрын

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

2 жыл бұрын

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

@uziboozy4540

2 жыл бұрын

You don't know much, do you?

@espressothoughts

2 жыл бұрын

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

2 жыл бұрын

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