Tailwind-Merge Solves 3 Big Problems & Mistakes in Tailwind CSS

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 First mistake
4:58 Second mistake
6:24 Third mistake
6:59 Tailwind-Merge
12:30 clsx / classnames vs twMerge
14:43 ...restProps
#tailwindcss #webdevelopment

[@ByteGrad]

👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs

[@3boodon]

This is literally a life saver package .. thanks for sharing ❤

[@AlexSmith-ms9xb]

Excited about the complete reusable button component video. When does it lands?

[@ByteGrad]

Working on it 😉

[@michaelgerullis4300]

a lot of the necessity for thins seems to come from the fact that people often forget to "actually" render just the right classnames when needed.
instead of this:
className={`bg-white px-4 py-2 ${someVar ? 'bg-black' : '' }`}
do this:
className={`px-4 py-2 ${someVar ? 'bg-black' : 'bg-white' }`}
This is very simplified ofc, just illustrating

[@SaiponathGames]

How does this tailwind add the bg-grey-500? Because you said it uses regex?

[@user-gq4hw2bs9t]

9:32 dynamic class is not working when restart project(npm run dev). tailwind do not leave class.
/ code sample
className={twMerge(`mobile:${gnbActive ? "flex" : "hidden"}`)}
please check up this.

[@mariavillen5237]

I am done with tailwind. I have to use custom components. Well, twMerge do not recognize custom components of tailwind config, so if you want to use twmerge, you have to repeat all your custom classes configuation in twmerge config. And it has bugs, like twmerge("w-96", "w-full") is not working.

[@ByteGrad]

W-full will override w-96

[@mariavillen5237]

@@ByteGrad well I am maybe doing something really wrong because it is not overwriting it. I have the 2 classes and w-full is strikethrough. I saw the git discussions. There was a similar bug with w-fit and w-full. By the way, your content is awesome!

[@sibanzboss6705]

how can i pass a children

[@ByteGrad]

Good question, I’ll have a complete reusable button component video soon

[@sibanzboss6705]

@@ByteGrad thanks, i'll be waiting for that

[@CoIdestMoments]

First big mistake is using Tailwind, it always end up with JS inline styles or finally creating and importing a .css file

[@jvsvogler]

It's much faster to write using Tailwind's utility classes than inline JS, but also it makes your spacing, sizes, etc much more consistent and easier to work with. Having the styles on the same file as the component also makes it a lot easier to figure out what is going on so you don't have to back and forth between files, so yeah, using Tailwind is definitely NOT a mistake.

[@user-fr2fm3ri3w]

noobs when a library offers utility classes 😡😡😡😡