Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar
Вставка
- Опубліковано 14 тра 2024
- Learn the basics of Tailwind CSS by building a Discord-inspired navbar from scratch. Learn how to leverage utility classes to build responsive animated UI elements faster fireship.io/lessons/tailwind-...
#webdev #css #tutorial
🔗 Resources
Tailwind Docs tailwindcss.com/
Tailwind React Setup tailwindcss.com/docs/guides/c...
Source Code github.com/fireship-io/tailwi...
📚 Chapters
00:00 Intro
00:54 Should you use Tailwind?
01:42 Setup
02:48 JIT Mode
03:20 Functional CSS Basics
04:06 Flexible Container
04:41 Organize UI Components
05:07 Position a Sidebar
06:58 Customize Colors
07:50 Icon Buttons
08:23 Custom Classes with Apply
09:32 Pseudo-class Variants
09:56 Animation
10:34 Groups
11:54 Dark Mode
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
Beginner Tailwind Tutorial
Using Tailwind in React
Tailwind Animation
Tailwind Dark Mode
CSS vs Tailwind vs Bootstrap - Наука та технологія
Okay so I'm convinced this guy collab with fbi to provide us content we often searching for
Or him is a wizard.
2spooky4me!!!
Or him is a wizard.
2spooky4me!!!
True as hell brooooo😂😂😂😂
Spoopy
I’m pretty sure I heard him say he is a bot made by Google or something.
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
And i, at friday 3am LOL
Me, at Saturday 1am
Wednesday 1 am lol
Thursday 5pm lol
Monday 2.00am
I almost gave up finding a Short and Neat Tailwind CSS tutorial but Here it is.
Thanks Universe
Checkout tailwind labs channel, great stuff there.
@@MrKarma4ya I second this. It's an amazing channel
@Christian Dude Prove it
@@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)
Good point, thank you
In tailwind v3 it's gonna be JIT mode by default without purge
@@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!
@@CaamSerenity I wasn't talking about the CDN version, I was referring to tailwind not using PurgeCSS anymore, mb
@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
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.
Are you a software engineer who develops c and c++ applications?
Bro suggest me what to do after C++ . I mean is there some project that a beginner in C++ can do ?
@@rajnishmishra453 one of the first things I did was implement a basic register-based VM
@@anandyuvrajsinghsengar170 Not software, I am a robotics engineer so I work mainly with hardware control.
@@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!
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!
Yo! I started learning tailwind css yesterday. 100% accurate video.
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.
I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉
Thanks to this tutorial I tried implementing tailwind in my Svelte project and fell in love with it, thank you very much!
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.
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!
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.
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.
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. :)
You make things super simple and understandable. I love it. More content please.
this is personally the one I most awaited for ❤️. less gooo 🔥🚢
Jeff your videos are so amazing you condense and explain things so well!
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!
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
ya it makes it less tedious
@@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
@@liquidrider why do u think it makes it more tedious?
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!
By far one of the best coding channels I've come across, if not the best for consistent quality uploads!
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!
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.
it's so fucking bad
Css is cancer
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
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?
@@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.
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.
your videos are the best,
the quality, the tutorial, the design... everything is so perfect with you
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 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!
Thank you so much for explaining Tailwind CSS in such a simple and beautiful way.
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. 😆
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'],
},
},
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.
Why would you write css when you can use html classes for each property. Zoomers invented CSS again
@@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.
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.
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.
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
Man your channel has taken a place in my heart love you guys ❤
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
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.
This coming in while I'm struggling with semantic UI is heavenly.
Sadly, I am too far gone.
at first I sceptical on tailwind, but with your video which almost a year ago, now I know I need this lib
These tutorials are amazing. I can watch a 10 hour video loop of this.
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.
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
agreed vite is amazing!
wt is craco?
i use tailwind with nextjs but never had to use craco
May I ask why you switched to Vue from react?
@@emmanuelokonkwo6578 ik that's such a ridiculous thing to do
@@nishanthdipali6838 how's react better than Vue. Vue is much simpler to learn and I don't know what makes react better. Please explain
Didn't know we could build a part of Discord in a few minutes.
Love you so much !!.🥰
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.
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!
Actually there are tailwind libraries such as Daisy ui which has a bunch of components.
Rly like that library ✨
thanks for the tip!
@@lubaaudio dude use flowbite . Its free components are far better than daisy
@@partialcoder6386 yo thanks for the tip. I'll check it out
Jeff, you are the tailwind of tutors. Your work is masterpiece.
Thank you for the great video Fireship! Really needed this.
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?
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.
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.
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.
tailwind is for components based websites... if you write your components well you won't have a problem applying tailwind in bigger projects
Tailwind is the only framwork that scale for big team. With normal css, you end up with conflict css
@@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.
This was a good tutorial. Showing different approaches to using tailwind. I liked it.
DAMN! all the tailwind essentials packed in 12minutes !!!! you rock bro
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.
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.
I was waiting for this for so long. Thank you so much. ♥🔥🔥🔥🔥🔥
best tailwind vid iv seen so for thanks for explaining the classes as you go.
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.
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.
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.
on an enterprise scale you don't create from scratch, that's why exist frameworks and libraries.
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.
"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.
@@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.
Just the video I was looking for.
Thanks 😁
tailwind is one of those exceptional things which are just done right which makes them stand out and super good
I wish there was a vscode extension that could hide the tw classes and expand on click
go write it
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
@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
What the actual fuck is that @-, the guy deleted his comment?
@@Dorumin What did he write?
@@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)
@@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.
Your tutorials have really help me get into code, thank you !
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! 😁💯
0:57 that couple pixels left align box throws me off balance
Love your content tho
I use tailwind with vite and svelte or react just because together they seems a stack like JAMStack.
Excellent video, love the way you cover topics!
Your awesome you somehow manage to make all your videos interesting for me please don't ever stop uploading
Tailwind + IntelliSence is the holy grail for frontend styling
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
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.)
@@pixsa some ideas might be browser specific prefixes, and some smaller already defined style set, some additional tooling. But yes, maybe preference. Hype?
video quality is next level, superb as always
One of the best programming channels on UA-cam!
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.
The whole library feels like an anti-pattern...
@@kylclrkFair enough, it's not everyone's cup of tea.
yeah the shits jank. Another hype train I won't be boarding
To each his own. For React, I prefer MUI with customization.
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?
rounded-3xl will set n rem/px to the element, and full will made it 100%
@@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")
Maybe it's a transition thing? I'm not sure how it would transition from % to rem. I could be wrong tho
@@nexxai it is probably because of transition duration. rounded-full would animate it from 10px or so to 9999px, essentially making the animation useless
@@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%]
Wow! Thank you for this. The productivity tips like apply were super helpful!
Wasn’t aware of @layer @apply trick. Okay Tailwind is a killer.
Best channel for dev.
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.
tailwind is for those who know css, lol!
"Optimize the CSS" what does that even mean? lol
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
If you want to future-proof yourself as a front-end developer, learn CSS in-and-out before you touch a library like Tailwind.
@@trentbosnic exactly because i know how to write decent css i think that tailwind is not that useful.
@@chepossofare Yeah, I've tried it on a few projects, it felt like my hands were tied. I have no use for it whatsoever.
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.
explained so nicely in short and sweet manner thanks you sir :)
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.
lol no
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.
great content! thanks, by the way, is Tailwind CSS suitable for a medium to big size project?
This is just a bunch of classes which you can use anywhere
yup it is used in enterprise projects too. Its just a css library with very core features
thanks for answering it!
100% yes... 😉
Okay you got me - I'm a believer in this library now
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!
came with speed of light
but due to network acting as medium
light got diffracted
Gonna use that line with my girl next time
@@Apollo1_ Lol
so this is basically CSS but you save 2 keystrokes
Someone finally said it!!!!!
such a wonderful and clean tutorial...Thank a ton sir.
With tailwind I put together static client projects overnight, what a wonderful resource the best 300 bucks I ever spent
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.
🤓
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?
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;
}
@@elkekegrande4816 Hey thanks man!
Had this issue too, fixed it by adding borderRadius: ["hover"] to my tailwind.config within the variants object
variants: {
extend: {
borderRadius: ["hover"],
},
},
wow tailwind handling the formating at the div class in a cleaner manner is like going back to html2 and using style
Sounds great for generating utility classes on the fly. Sounds insane to use this by itself.
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!
I would recommend using multiple components for most things, but sometimes shared utility styles work better as CSS classes with apply.
@@Fireship this was awesome!
@@Fireship awesome, thank you very much!
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
👼👼: SCSS
what a superb tutorial. extremely well done.
I was thinking of learning tailwind css and then i saw your video.
Youre a ninja
Is it just me or is anyone else not able to even get past installing dependencies because they conflict so much?
I just posted a Tailwind CSS Tutorial for Beginners (in 2023) - this should be exactly what you are looking for... 😉
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…
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.
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?
The "red button" part was funny :)🤣
Thanks for your awesome tuts
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.
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.
Depends if speed is or is not on the line.
"Blah blah blah, whine whine, more cry, non-sense explanation to self."
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.
@@bicunisa 100%
Yes. CSS > Tailwindcss.