Probably one of the best videos explaining the problem, a solution that doesn't work and explain why, then go on to present a better solution. This is quite rare in tech videos, which often skip over the why's and hows. Kudos!
@simonswiss Жыл бұрын
Thank you, I appreciate this comment that balances the "get to the point, you wasted 10 minutes!" comments. Glad you enjoyed the progressive explanation - I wanted the message to land properly.
@dealloc Жыл бұрын
@@simonswiss You will always have people who don't know how to use the UI to skip parts in a video. Keep creating good content for people who care :)
@simonswiss Жыл бұрын
That's a good way to look at it, thank you! 🙏
@abhyuday911 Жыл бұрын
@@simonswissi’m new but i’m loving it ❤
@simonswiss Жыл бұрын
@@abhyuday911 Thank you so much! ❤
@joemart6887 Жыл бұрын
The brightness of this video has left me blind for the rest of my life.
@simonswiss Жыл бұрын
I am preparing you for the outside world when it's time to go get some fresh air 🤗
@faheemulhassan76145 ай бұрын
well explained. I was beginner learner and stuck in this problem. went thorugh your video and just fully satisfied. Thank you so much !!
@simonswiss4 ай бұрын
You are welcome!
@plitzcorporation55897 ай бұрын
In my full time job, we use WP as a headless CMS, and this library has solved a lot of issues when pulling the classes from the blocks.
@simonswiss7 ай бұрын
Yeah that's a great use case for that scenario!
@skewie88 Жыл бұрын
Thanks for explaining the problem. I ran into this when updating tailwind, all of a sudden everything looked wonky. I looked into twmerge but felt like it was a hassle to update the whole codebase to call a utility function. Feels like something that should be solved at compile time.
@allsunday1485 Жыл бұрын
Hey Simon, would you please consider using dark mode? The white screen flashbang is really hard in the eyes, especially at night, and I mean hard as in squinting my eyes and then giving up on the video. Love your content and I hope you give this some thought.
@simonswiss Жыл бұрын
Thanks for the suggestion. I struggle with the opposite with my eyes, but you make a good point. I usually use Night Owl Dark and no one ever asked for light - so I'll do the next video in dark theme!
@allsunday1485 Жыл бұрын
Never thought the opposite was algo possible! It makes sense. But yes, flashbangs are something that always gets comments throughout KZbin, and some KZbinrs even warn before one happens. Keep up the good work bud, and I'd love to hear your take on tailwind and toast notifications solutions like react-hot-toast that don't make it necessarily trivial to integrate with it.
@akza0729 Жыл бұрын
I agree. It just piercing
@twothreeoneoneseventwoonefour5 Жыл бұрын
You shouldn't watch anything in darkness anyway. That's bad for your eyes, like really bad. You should always have some kind of light. I am coding just fine with a light theme at 3am. Why? Because I have the fricking lights on.
@lupinza_ Жыл бұрын
Hi Sunday, Maybe try watching the video during the same time of day as Simon
@edriso2 ай бұрын
Found you on Laracasts, thanks for this great content and vibes man God bless 🙌
@simonswissАй бұрын
Am I on Laracasts? Do you mean in the comments?
@edriso14 күн бұрын
@@simonswiss Yes in the comments section, it was motivating learning with you and others.
@simonswiss14 күн бұрын
@@edriso haha awesome!
@johnhuang66096 ай бұрын
Awesome video bud, as a library author I have been getting stuck in this like sneaky problem.
@simonswiss2 ай бұрын
Glad I could help!
@greendsnow Жыл бұрын
9:52 You've been waiting for THIS part for almost 10 minutes. The thing is that this library opens the gateway to tailwindized component libraries all over the place. You will finally be able to Bootstrap + Tailwind with no issues (I guess)
@simonswiss Жыл бұрын
Can't appreciate the destination without embracing the journey 🤗
@GameDSS Жыл бұрын
It's good to explain the problem before showing off the solution. But a timestamp would be appreciated for people that just want to see how it works!
@simonswiss Жыл бұрын
@@GameDSS There are chapter timestamps in the video description and you can see them on the video timeline 👍
@John-eq5cd4 ай бұрын
Very clear and useful, thanks !
@simonswiss4 ай бұрын
Glad to hear that!
@psybitcoin Жыл бұрын
Make more of these tailwind videos! Love it
@simonswiss Жыл бұрын
Yeah, a lot of folks seem to love it, and I love it too :)
@danielnoworyta Жыл бұрын
Cool video Simon. One of the best explanations of this problem in TWCss.
@simonswiss Жыл бұрын
Glad it was helpful! Yeah I tried to explain it as good as I could, even if it took a bit more time to deliver 👍
@prashank Жыл бұрын
Pretty cool tool, thanks for showing us!
@simonswiss Жыл бұрын
Yeah, it's really good 👍
@MishaMoroshko Жыл бұрын
Thanks Simon for recording this video and explaining the why. What would you recommend doing in situations where I’d like to allow the users of to override certain classes (e.g. ) but restrict (or, at least warn) users from overriding other classes (e.g. )?
@simonswiss Жыл бұрын
Thanks! In that scenario I think it makes sense to setup a few style props for spacing, width etc instead. Sort of how Theme UI or Shakra UI work, if you are familiar with them. Or a "layoutClasses" prop that only allows "contextual" classes (width, margin, display etc). Might be a bit confusing for the user though 😅
@nazarshvets7501 Жыл бұрын
1. U can add jsdoc to the `className` prop, and tell users about ur intention 2. U can add, for dev mod only, runtime checks and logs. This can be a little bit complicated bcs u need to cover custom matching (or maybe there is already a solution idk)
@hoangtran-ek8mn9 ай бұрын
Very comprehensive! Thank you so much!
@simonswiss9 ай бұрын
Super glad you enjoyed the video!
@ronaldtejada88465 ай бұрын
Awesome Video buddie!
@simonswiss4 ай бұрын
Thank you!
@boopfer387 Жыл бұрын
excellent explaination
@simonswiss Жыл бұрын
Glad you liked it!
@JimOHalloran Жыл бұрын
That's pretty cool. I've never had that issue, didn't even know that was a thing. But now that I stop for a second and think about it, it seems obvious. And also, I wonder why I've never seen this issue, since it seems like I should have. Although I might have hacked a workaround to something just like it the other day!
@simonswiss Жыл бұрын
Maybe you got lucky with alphabetical color overrides, and always passed classes generated lower in the CSS output 😅
@JimOHalloran Жыл бұрын
@@simonswiss Maybe. I also tend to handle situations like your example by defining a "theme" property on the button, then handling the selection of classes entirely within the component rather than passing classes in. So I've probably mostly avoided it using different design patterns.
@simonswiss Жыл бұрын
Yep, what you describe (style variants via props) is definitely the way to handle various styles.. but even then, I had accidentally a sneaky conflicting padding classes combo when having 4-5 composable style variants, even trying to be careful with separating styling concerns between 'size', 'look' 'shape' etc. Can indeed be avoided but sometimes it becomes quite involved with multi-style variants.
@simonswiss Жыл бұрын
Another tool that can help with that is CVA by Joe Bell - will probably do a video on that as a pretext to try it out!
@JimOHalloran Жыл бұрын
@@simonswiss Yeah, padding was one I was specifically thinking of. The number of times I must have mixed sm:p-, p-, px- and pl- or pr- together on the same div and seem to have gotten away with it. Granted some of those will be different CSS properties, so CSS would presumably resolve that conflict internally. There's a few times, I've found myself thinking "The class is at the end, so it must be winning". which as you pointed out in the video is actually CSS order, not class order. So I feel like I must have been down this rabbit hole without recognising it, then hacked my way out without really understanding what I'm doing.
@wahhaab711 ай бұрын
Amazing, didn't know there was something like that
@simonswiss11 ай бұрын
Yeah, its pretty useful!
@focusroom_ Жыл бұрын
This is super useful!
@simonswiss Жыл бұрын
Definitely can solve a bunch of subtle problems!
@amarbir22 Жыл бұрын
Thanks Simon, can we have a video on how to make reusable components with Tailwind ?, Where UI can be customized using props. Similar to how MUI and other component libraries work.
@simonswiss Жыл бұрын
It's not free, but I have a Pro Tailwind workshop on exactly that, which I think you'd like: protailwind.com/workshops/multi-style-tailwind-components I also have a free article covering _some_ of the contents, you might start with that :) www.protailwind.com/just-in-time-friendly-style-variants-in-tailwind-css-ui-components-part-1
@tririfandani1876 Жыл бұрын
`tailwind-merge` also supports custom conflicting class names. let's say we have custom class names that should conflict if we pass it together, e.g `alert-success`, `alert-error`, `alert-info` if you use normal/default `twMerge`, it can't detect the conflict because `alert-success`, `alert-error`, `alert-info` is not supported by tailwindcss by default. but we can use `extendTailwindMerge` or `createTailwindMerge` and define our custom conflicting class names pretty neat
@simonswiss Жыл бұрын
Yeah, that's really cool! Have not used this myself, but I saw it in the README docs 👍
@wahyusa Жыл бұрын
Thank you! really love your explanation
@simonswiss Жыл бұрын
That's great to hear, thank you!
@anirudhcodes Жыл бұрын
Such an intelligent video, thanks for making!
@simonswiss Жыл бұрын
Thank you, glad you enjoyed it!
@Stoney_Eagle Жыл бұрын
I got something to do tomorrow 😱 what a lovely package. No more bang classes 🎉 Does this fully work with custom extend items and prefix plugins?
@simonswiss Жыл бұрын
I don't think it directly supports plugins, but you may be able to write custom plugins for tailwind-merge, as explained here: github.com/dcastil/tailwind-merge/blob/v1.12.0/docs/writing-plugins.md
@maxwebstudio Жыл бұрын
Ohhh nice one ! Thank you !
@simonswiss Жыл бұрын
You're welcome!
@justaguy5367 Жыл бұрын
Hey Simon, I'm a first timer just discovered your channel and I love it, just wanna ask you about your browser, is it customised or what? it looks beautiful
@simonswiss Жыл бұрын
This is ARC browser - it looks like this by default and you can customize a lot of things. An absolute treat for scresncasts, and all chrome devtools / extensions work seamlessly 💫
@simonswiss Жыл бұрын
Also, thank you for your kind words on my channel, and welcome aboard!
@milankrunic3093 Жыл бұрын
Great tutorial!
@simonswiss Жыл бұрын
Thank you, happy yo hear you enjoyed it!
@HeyNoah Жыл бұрын
Awesome explanation video!
@simonswiss Жыл бұрын
Thanks Noah! That would work perfectly well in the components we built in the Multi-Style Tailwind Components workshop :)
@user-xr4oo2xp7q8 ай бұрын
For some reason, it is no longer working on my setup! EDIT: If you are using prefix in the tailwind, make sure to extendTWMerge like this: import clsx, { ClassValue } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; const twMerge = extendTailwindMerge({ prefix: "tw-", }); export default function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }
@simonswiss8 ай бұрын
Thanks for sharing!
@user-xr4oo2xp7q8 ай бұрын
@@simonswiss You're welcome
@AnsBdran Жыл бұрын
what if the base styles you want to override are defined in css stylesheet, className={twMerge(`input-group`, 'border-danger-900') this doesn't work
@ivodelev9794 Жыл бұрын
Thanks for this video, one quick question: How do you guys handle tooltips on disabled elements(Button, Inputs, ...exc) ?
@simonswiss Жыл бұрын
I haven't had to do that before, not quite sure how to answer this without looking at a specific example!
@obouchari Жыл бұрын
Great video as always! Could you please share the VS Code plugins you use for tailwind and such? Thanks
@simonswiss Жыл бұрын
It's mostly the Tailwind Intellisense extension. Outside of that, I use prettier with format-on-save, and the prettier-plugin-tailwindcss Prettier Plugin for class sorting. Night Owl theme (light or dark), Dank Mono font. That's about it!
@technobanjo Жыл бұрын
can u describe the video in braile pls I just went blind from all the light mode
@simonswiss Жыл бұрын
Sorry, can't see your comment, also looked at my own light theme.
@toastrecon Жыл бұрын
So, as very much a beginner: the "className" prop is available on the component (in this case, Button), and so we use TW-merge to bring in any "overriding" TW styling and merge it with the styling we've declared for the component. That way, we can still use our reusable component wherever we want, but if we want to make it a different variant, we can just pass whatever changes we need. Would it be wise to have a different prop passed in? Like, let's say that we want the button to be a warning style, so we'd change the background and text color to shades of red and we wanted the shadow to be larger. We could pass those in via "className", but maybe we could also pass it as a custom prop called "style" (e.g. "style" would be "warning" in this case) or something and then have logic within the component that would handle the styling?
@simonswiss Жыл бұрын
Yep, absolutely. You typically would have specific style "variants" via props like "size", "impact", "tone" etc where you can handle custom styles. Passing a classname attribute (can also be another prop name) is more of an "escape hatch" when you want to do something very unique/werid/one-off.
@simonswiss Жыл бұрын
In one of my Pro Tailwind workshops, we cover precisely what I think you're asking for, in case you're interested: www.protailwind.com/workshops/multi-style-tailwind-components
@toastrecon Жыл бұрын
@@simonswiss Thank you! Cool, I'll check it out!
@shinobi_coder8811 ай бұрын
Yeah i know, but what is the point to have className with the same conflicting CSS ? If we wanna do p-5 then why do we need p-6 for? And for Responsive Design we can do it like sm:p-5 md:p-6 p-6 . What I'm trying to ask is, why do we need to override classes and what's the point of having conflicting properties?
@simonswiss11 ай бұрын
There is no point having conflicting properties, ever. But there are many scenarios where you accidentally end up with conflicting properties - or cases where it's tricky to avoid those or make a specific one "win". Tailwind Merge helps with that.
@shinobi_coder8811 ай бұрын
@@simonswiss oh I see, thank you
@simonswiss11 ай бұрын
No worries, you're welcome!@@shinobi_coder88
@TutoDS2014 Жыл бұрын
One question, what the impact on performance when use the `twmerge`?
@simonswiss Жыл бұрын
I haven't done benchmarks or anything, but it indeed does have a tiny bit of runtime JavaScript. So it will never be as performant as "just CSS", but I think the impact is pretty minimal. tailwind-merge can run on the server (server components) and only the computed classes get sent to the client, nothing else. I would say, the performance hit is pretty minimal - but don't use tailwind-merge unless you have the sort of problems/challenges that tailwind-merge is helpful with! Hope it helps!
@mharrisonb6 ай бұрын
@TutoDS2014 Note that the absence of a run-time cost or including tw-merge in your JS bundle is true *only* of server components - if you have a regular component in a server-side rendering framework like next.js or Remix, even if if you don't use `useEffect` or change any props to cause it to re-render on the client, it will still render at least once on the client because that's how react hydration works, so tw-merge would still run in the browser in that case. Probably a minor concern for most projects, just explaining FYI
@jessypouliot8374 Жыл бұрын
This is cool but I would be concerned about using this on a server side rendered page. Given a page has hundreds or thousands of twMerge calls and a server has a lot of traffic that's a lot of extra function calls for just a bad className design in the first place. There's the !important variants that exists that can do exactly this and better code overall will help more than this IMO
@simonswiss Жыл бұрын
A thousand twMerges in one single page? Yeah that's probably a lot.. !important variant is great indeed, but it assumes you *know* what classes are conflicting, so you can decide which one should win.
@butadpj Жыл бұрын
How did you still get tailwind intellisense on the Button’s className props? Im not getting any tailwind suggestions on my end once I pass the className as props
@simonswiss Жыл бұрын
You can extend the surface area of the Tailwind intellisense with the classList option: github.com/pro-tailwind/course-multi-style-components/blob/main/.vscode/settings.json#L5
@moubiosu2258Ай бұрын
may i have your font style and color theme of vscode? love it very much, thx
@simonswissАй бұрын
Dank Mono font - Night Owl theme ✨
@mariavillen523711 ай бұрын
You need to config all custom classes in tailwind config for twmerge config also (so you have to config your custom classes twice) and if you make something like className = {twMerge("w-96", "w-full")} it is not working, so bug.
@syamsarosa5916 Жыл бұрын
May I know why did you stop making video in tailwind labs Simon? Anyway, upload here or in tailwind labs, doesn't really matter as long as you upload new tutorial. Keep up the good work. Have a nice day.
@simonswiss Жыл бұрын
The answer is very simple: I got fired. One day, as I was editing a video, I got the good ol' "Hey, got 5 min to chat" DM on Discord. 5 minutes later, I was cut from the team, and removed from the KZbin channel. Surprisingly, there is only one new video on the channel in 1+ year. Turns out making good videos is hard and time-consuming, as they found out! I honestly think they decided to rely on community influencers like Sam Selikoff or Theo to substitute the need for a first-party KZbin channel. I was loving my job and had no intention of going anywhere.
@syamsarosa5916 Жыл бұрын
@@simonswiss bro... I never thought it was because of that. Sorry to hear that. Wish you all the best bro. Hopefully your channel can grow as big as tw lab. With your knowledge & method of teaching, I'm sure it will. Keep up the good work.
@simonswiss Жыл бұрын
@@syamsarosa5916 thank you so much ❤️❤️
@nikhilpsathyanathan Жыл бұрын
How does it works if I have a custom tailwind config based on a style guide?. Do I have to make any modifications?
@simonswiss Жыл бұрын
Not sure I totally understand the question, but I feel like this docs page should get you going: github.com/dcastil/tailwind-merge/blob/v1.12.0/docs/configuration.md
@huytranvan2754 Жыл бұрын
How can we use tailwind-merge with @apply in css files? Thanks
@simonswiss Жыл бұрын
You probably can't. Tailwind merge is JavaScript that runs when your component function is executed, at run time. It does its conflict resolution in JavaScript, so you won't be able to do this in a CSS file. You can probably use it in a Tailwind plugin though, since twMerge works on the server as well.
@benemma5602 Жыл бұрын
real game changer, but notcied it doesn't work with component classes e.g @layer components
@simonswiss Жыл бұрын
Hmmmm, component classes typically affect multiple CSS properties, so it would be pretty hard to merge those. I haven't tried, but I don't feel like passing a component class to a UI component with its own styles is gonna go too well in any scenario. Passing classes to a component is usually a one-off, escape hatch way of doing a change you really need to. Not the primary way of composing styles, in my opinion.
@marvelbox Жыл бұрын
thanks for this
@marvelbox Жыл бұрын
by the way, I'm confused about whether it should be installed as a dependency or devDependency. what do you think?
@simonswiss Жыл бұрын
@@marvelbox dependency, because it's a runtime library 👍
@marvelbox Жыл бұрын
@@simonswiss such a quick reply. thanks a latte
@bernardkissi7100 Жыл бұрын
What fonts are using for your editor
@simonswiss Жыл бұрын
Dank Mono 💫
@k16e Жыл бұрын
Is this a Tailwind class or a React?
@simonswiss Жыл бұрын
Which one? twMerge? It's not a class, it's a JavaScript function. It's neither React nor Tailwind, it's... its own thing 👍 But yes it works *with* Tailwind and React (and I imagine other JS frameworks).
@ThomazMartinez Жыл бұрын
so is that better than clsx?
@simonswiss Жыл бұрын
It's different! clsx doesn't merge conflicting Tailwind classes - but if you only need to combine classes, clsx may be better!
Жыл бұрын
WOW
@simonswiss Жыл бұрын
I know, right?
@thomasz5560 Жыл бұрын
does it work for react native ?
@clakams Жыл бұрын
What coding font is that? interesting
@hynekss8618 Жыл бұрын
I guess it's Operator Mono by Hoefler&Co. It's a paid font; however, I vaguely remember there's an open source 'replica' available.
@twothreeoneoneseventwoonefour5 Жыл бұрын
It is definitely Dank Mono. I am sure 100% because I also use this font for more than a year already. The f that goes below the line is unique in that font (among other stuff like italics of course).
@simonswiss Жыл бұрын
Dank Mono!
@simonswiss Жыл бұрын
Nope, Dank Monk. Also a paid font, but significantly more affordable!
@simonswiss Жыл бұрын
You are indeed 100% correct!
@arifurrahman9133 Жыл бұрын
I love it
@simonswiss Жыл бұрын
It's really good!
@jaedanpersaud9490 Жыл бұрын
why not just join the className as a template literal and avoid the function?
@simonswiss Жыл бұрын
Hmmm because the function is what contains the logic to resolve conflicting classes? You can definitely do it all manually with string concatenation and interpolation. If you know exactly what you are doing - and then no runtime cost 👍
@phojie6868 Жыл бұрын
that is why, its better to use unocss xD
@LarsRyeJeppesen Жыл бұрын
Yeay!! more fugly jsx code :)
@Hurtwolf Жыл бұрын
Vi ka li det!
@LarsRyeJeppesen Жыл бұрын
@@Hurtwolf det er syre for øjnene
@Hurtwolf Жыл бұрын
@@LarsRyeJeppesen Jep. Har også installeret "Inline Fold" Extension.
@hakuna_matata_hakuna Жыл бұрын
Are you fo real my brother in Christ? Light mode !!!!!!!!!
@simonswiss Жыл бұрын
Your avatar is too dark, I can't see a thing 😅
@hakuna_matata_hakuna Жыл бұрын
@@simonswiss exactly
@simonswiss Жыл бұрын
@@hakuna_matata_hakuna So I thought!
@judahwilson6756 Жыл бұрын
nice, a midi keyboard
@simonswiss Жыл бұрын
Do you mean the Rodecaster Pro? It's an overly fancy audio interface/podcasting station. That said I do have a midi keyboard on my desk, but just off camera! 😅
@leanazulyoro Жыл бұрын
I keep seeing this stuff because at work I'm forced to use tailwind. I can't believe people are buying tailwind, I can't believe people are excited for these solutions that would not be needed if not using tailwind in the first place. I can't believe people getting excited for a new tw version that supports x feature that css has supported for years... all of it because they don't like coming up with names for the elements to use as classes. Guess what... you still need to come up with names for your components, and you're left with a bunch of new issues, which is why you're now on yt watching this. :facepalm:
@simonswiss Жыл бұрын
Tailwind CSS is free. I guess you mean Tailwind UI templates/components. And I can't believe you spent the time to complain about all of this in a KZbin video. Most people use Tailwind because they love the productivity and confidence they get with it. Not naming classes is just one aspect of that productivity boost.
@leanazulyoro Жыл бұрын
@@simonswiss didn't mean "buying" in the literal sense
@simonswiss Жыл бұрын
@@leanazulyoro Ah, gotcha - "buying into" Tailwind. I originally thought the same with Tachyons, and most people do start by hating/rejecting it. If you still don't like it after using it... I am sorry you are forced to use it at work. On the flip side, I ended up quitting jobs because I could not use Tailwind and I was becoming miserable 😅
@joestrkr Жыл бұрын
The button example is not so contrived 😂
@simonswiss Жыл бұрын
Yeah lol buttons can get crazy. This particular example was pretty dialed down 😅
@joe-robin Жыл бұрын
Coding in white theme should be a CRIME
@simonswiss Жыл бұрын
It's terrible isn't it? But it's too bright out here and I can't deal with the glare in dark themes 😅
@TwoLeggedTriceratops Жыл бұрын
Your IDE preference are sinful 😂 jk
@simonswiss Жыл бұрын
So I am being told in these comments 😅 Noted, noted 🤣
@RyuuuGamingUnlimited Жыл бұрын
12 mins of explaining something so simple........................................................................ get to point damn it!
@simonswiss Жыл бұрын
Believe it or not, I've tried many times, in shorter form, and the message was not received. I also have a 2:20 version of this video on Twitter. I am terribly sorry for wasting 12 minutes of your life, happy to provide a refund on this free video 😅
@killemalljustice Жыл бұрын
Use the chapters 🙄
@HaithamAli-fy8vo Жыл бұрын
clsx works fine, am I missing something?
@twothreeoneoneseventwoonefour5 Жыл бұрын
yes, this one removes conflicts p-4 and p-5 get merged into "p4 p5" which doesn't make any sense in clsx in tailwind merge they get merged into just "p5" that gets rid of some of css conflicts that DO EXIST, you can research it yourself if you are interested.
@simonswiss Жыл бұрын
clsx works great but will not resolve conflicting styles, so you'll sometimes have unexpected results, just like the video explains. twMerge is very similar to clsx, but does ensure only one class per CSS property is being set on the element when merging strings.
@je9625 Жыл бұрын
React is needlessly complex.
@simonswiss Жыл бұрын
For this simple example, yes, but it's very useful for more advanced stuff!