I Never Want to Write Tailwind Any Other Way

[@MrREALball]

Be careful with tw-merge on large or performance sensitive projects. It has a runtime cost in it (obviously). It is significant (and noticable) the first time a variation of classes is presentend and than it gets cached. The best way to mitigate this is to add variants with predefined styles to common components (buttons, inputs, panels, headers, etc.), instead of changing styles with className. A nice library for this is class-variance-authority. At times when you want more flexibility from your components there are 2 additional things you could do: 1. making a custom component-layer classes for common components (like buttons and inputs), that way tailwind would put those declarations before the utility classes, hence the utility classes (basicaly tailwind classes) would always override the relevant parts. 2. use ! (exclamation) when you need to override something, so if you apply additional styles to a button, just put exclamation on before every utility class, that way it would be marked as important. In the cases where performance is not an issue, tw-merge is great, but, not all projects are like that.

[@succatash]

U like CVA over CLSX?😊

[@SR-zi1pw]

Ahh thanks for the info I use tw merge a lot didn't know about runtime

[@TheIpicon]

@@succatash they are different things, there shouldn't be a statement "over" something else. clsx is a tool that lets you combine different class names into one string based on some conditions and that's all. cva is a tool that lets you create and manage variants for your components. you should use cva to create your default component variants, and use clsx only in cases you want for some reason to modify those, which most of the time you wouldn't. you can take a look at how shadcn/ui does that, very neat implementation.

[@succatash]

@@TheIpicon awesome thanks

[@contigen]

Check out tailwind-variants

[@walkingin6375]

I highly recommend the vscode extension HeadWind, which will reorder your CSS or TailwindCSS classes to help maintain a consistent codebase and make things easier overall.

[@Veedsify]

bro i was just looking up prettier-plugin for tailwind but for some reason it wasnt working, this comment is a life saver

[@isaackoz]

HeadWind is fine if it's only you working on a project, but if you have a team it's better to use prettier for code consistency between team members. I.E. if another team member doesn't have the extension installed it won't be formatted correctly while prettier will force everyone to follow the same standards.

[@luucsss]

better to use the prettier tailwind extension

[@codinginflow]

The Prettier plugin for Tailwind is really amazing. I would also mention applying the recommended settings in the TailwindCSS VS Code extension. E.g. enabling autocomplete in strings.

[@Fuzbo_]

The prettier sort plugin actually just sorts the classes in the order they appear in the CSS file, so it’s easy to see what overrides what. (e.g. using “p-8 pb-0”)

[@TheIpicon]

always wondered what's the cn stood for 😂, thought it was a way to promote shadcn

[@arshadyaseen4328]

c: class n: names

[@TheIpicon]

@@arshadyaseen4328 he literally told us that in the video

[@automioai]

Feel you

[@igorbudimir573]

It does, his name is Shad ClassNames

[@sandeepreddy6247]

prettier saves lot of time while reading, thank you.

[@MrREALball]

Also, if you dont use objects and arrays as arguments for clsx (which you shouldn't, since those are slower, trigger more GCs and memory allocations, while offering next to no value in return), a faster alternative is classix. Or a function anyone could write on their own in a few minutes.

[@darrachbarneveld9201]

This is amazing, thanks a bunch!

[@theReal_WKD]

I'm using SCSS to style my projects. I have a bunch of reusable classes like "content-column" and so on, and for more specific UI I'll just create a custom class, like "product-card_image-wrapper". I like that it keeps my tsx clean with never more than 3 classes per element (most of the time 1 is enough, I very rarely use 3), which is the main thing that is keeping me from using Tailwind. Seeing 3 lines full of classes just burns my eyes. Can somebody please convince me that Tailwind is better and faster than SCSS to style my projects? Is there anyway to avoid the 3 lines of classes just to give basic styling to an element? Given that all my reusable classes are the same for any project I build, they're already in my boilerplate. I keep seeing everybody using Tailwind like there is no other way to add styles. Yet, I can't seem to find a single reason why I would use it. I ended up thinking that people using Tailwind learned to code via tutorials projects where Tailwind was used. So they never really got to write CSS itself. Having Webflow as a background before I started to code made me go through learning "vanilla" CSS. So when I started coding things from scratch, writing my own CSS felt just right. Then I enhanced it with SCSS but I don't feel like Tailwind would be such an improvement to my developer experience. On the contrary, I think it would make it worse. Anyway, somebody to convince me? 😅

[@John-Dennehy]

For those of us that still hate the overly long className lines, I often use the cn() utility you suggest to split the values into groups, i.e. sm:, md: lg: might all be passed as separate parameters to cn()

[@TheIpicon]

notice that cn has a huge runtime cost, using it just to make everything more pretty is pretty much a bad practice.

[@John-Dennehy]

@@TheIpicon good to know. I'll keep it in mind, but given how much faster it helps make my development, I might just take the hit in certain less important projects

[@mburakerman]

omg this is so wrong. you fixed merge conflict but you made debugging harder

[@vommir.]

Great video Josh, I was wondering if you’re planning a video about Vercel Storage Blob? It’s still in beta but seems like a nice solution to store images, videos, etc.

[@nomad_swe]

Idk who releases the tw-merge package but the real and proper one is actually named tailwind-merge on NPM, the other one seems to be a random fork. Also, in regards to the prettier plugin the class ordering isn't decided by prettier but by the creators of tailwind, as they are the ones who made the plugin. The prettier team has nothing to do with it.

[@krazymeanie]

There's two different packages. No "real" and "fake" one. You can say "official" since the one you're talking about is from the official tailwind team but I'm pretty sure tw-merge existed before the team made their own implementation

[@nomad_swe]

​@@krazymeanie Sorry, there seems to be some confusion. My first sentence is about tailwind-merge, which is not made by the official team (there is no official tw-merge implementation). It seems someone has forked this and is distributing it on NPM under "tw-merge" but the original package from the person who actually made it is distributed under "tailwind-merge" on NPM. See the weekly downloads for proof of which one is the real one there. So yes, there might be two packages but one is a random fork and one is released by the person who created the package and did all the work, I know which one i would like to download. My second sentence is about the prettier-plugin-tailwind package, which is official. And my point there was more of a nitpicky one. Josh says prettier decides the ordering but in reality it's the plugin that does (default prettier doesn't re-order classes) and since the plugin is made by the official tailwind team it would be more correct to say they decide it, not prettier. Should've made it more clear my two sentences were unrelated to eachother.

[@alexm9104]

I think if you find yourself in a situation where you really NEED tw-merge, it's time to look at your styles and rewrite them. Make component styles more "basic", use variable classes, but avoid tw-merge if you can.

[@sibanzboss6705]

I think there is a extention in vs code to order the classes instead of installing a dependencie

[@walkingin6375]

There is, it's called HeadWind

[@tanzimshahriar]

Thanks for the video Josh. I am wondering, how do you get the gzipped size on your imports?

[@GamingClubGermany]

Great Video and nice Tips! But one Problem i struggle with is that its gets really messy after a while and you have a Lot of classnames. Especially when you use Breakpoints like md:. Ist there a solution so Bring more Overview or even move the Styling to abdifferent Location Like Styles components for more Overview or do you have any other Tips to make this more "usuable"?

[@michael.knight]

That conflict merge setup seems overcomplicated. Also makes it harder to figure out what classes are actually work and what not.

[@wojciechosinski5927]

I was surprised that the border-none was applied. It's opposite of cascading. To me it's huge downside.

[@juniorsemerzier660]

Hello @josh!! how to generate pdf file using Nextjs 13?

[@semicolon6499]

You can you node js also

[@sallehshah]

Josh, how to setup prettier, eslint, commit lint , best practises for next js 13 with app router.

[@ricoaw500]

function in props isn't that means it will be running everytime?

[@zachphilipp786]

what is the difference between using your cn functions and just using tw-merge on a component? They seem to do the same thing?

[@vitvitvitvitvitvitvitvit]

clsx is used to handle conditions, wrote in a specific way

[@remongrabu]

These are great tips but I think the more intuitive way would be to put the incoming className as the first argument in cn() so that you could override the ChildComponent existing styles, so add the red border in this instance

[@nickwoodward819]

Not a fan of cva any more?

[@blazi_0]

I wish there was something like cloning styles in native tailwindcss css. Like you create a button and give it tailwind classes to style it, u also give it classname called btn-primary So when u give another component this classname btn-primary this will be same style as the first button you created Thia feature would be absolutely amazing

[@thelukaszns6322]

There is a feature like this! Search for @apply in the Tailwind CSS docs. But AFAIK, it's recommended not to use it in favour of creating reusable components

[@michael.knight]

That goes against the principles of Tailwind and is really only recommended for edge cases and can be done using @apply. You're better off creating a Button component in React and re-using that, instead of re-using the styles.

[@falkfrentzen4120]

Applying classes conditionally is absolutely awesome using the class-variance-authority library

[@abdiastar6451]

I cant explain how but you kinda look like erling haaland

[@moneyfr]

Unocss is way better

[@gmkhussain]

Best way to clean up Tailwind mess : don't use Tailwind

[@seongminpark3131]

so weg... OTL