Avoid This Tailwind Mistake (Dynamic Classes)

[@ByteGrad]

My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

[@alexandrmeyer]

The best explanation I have ever seen. I know about the issue for a while, but just now I understood why

[@MrAbbo11]

I literally lost my mind over this yesterday. Thank you for this!!!!!!!! I tried to chatgpt my way out of this and literally spent 2 hours on it. That was the end of my coding session yesterday, I was raging so hard I just couldn't continue.

[@webdev_telugu]

He is the best in addressing all the issues that we run into while using React and Next

[@agustintorres2904]

THANKS YOU SO MUCH IT WAS THE SAFELIST I HAD THIS ERROR FOR 3 HOURS THANKS YOU SO MUCH

[@samwise8731]

another option is using the syle attribute. Get hex code of corresponding tailwind class, and use it in style like

[@crasite]

Some best practice is to use class-variance-authority with twMerge. That's basically how shadcn style their component.

[@bilalch898]

That's the only thing I hate about tw.

[@rakagunarto1261]

the alternative is sending the entirety of tailwind CSS on page load, which is terrible.

[@bilalch898]

@@rakagunarto1261 na you can use tailwind CDN. It can handle dynamic classes.

[@rakagunarto1261]

@@bilalch898 yeah that's sending the entirety of tailwind CSS, all 2000kb of it, which is terrible.

[@bilalch898]

@@rakagunarto1261 nope, CDN doesn't ship code to your build.

[@alexm9104]

@@bilalch898 it does. You can optimize your build with command "npx tailwindcss -o build.css --minify". But I think this option is not available if you use TW CDN.

[@anj000]

Ok... 2:24 WTF

[@ByteGrad]

Its crazy

[@piush787]

Can't believe this.. An eye opener.

[@aymenbachiri-yh2hd]

THanks so much for the video, it was so helpful

[@ayanonlinee]

ohh finally I got the issue
😅
Thanks man

[@anonymous_dev9472]

Amazing content 🤩

[@maxzakh]

Great explanation, was giving me a headache

[@jawyor-k3t]

damn this channel is a gold mine. thanks

[@Furki4_4]

Thank you very much for your cristal clear explanation

[@abbashali01]

I was searching something for the exact problem where I had some color coming from an api and wanted the background of some cards to change according to the color. But it just wasn't happening and I was incredibly frustrated because of it and left the project midway. Thanks for the video. Now I can work on that project again

[@TadjhBrooks]

For that use case try setting the hex color directly in the html style param

[@samirneupane7563]

you save my day

[@cyb3ristic]

I remember having to set left margins dynamically, so I made a script which generates ml-[1px] to ml-[10000px] just so that I can reference any of them dynamically.. no idea if it was the best way to handle it but it worked.

[@suzanne_atkinson]

good to hear, I'm thinking of a similar solution..3600 classes to represent every minute of the day...

[@daniwalasy6654]

thanks it was usefull

[@sarojregmi200]

great video, thanks.

[@PROJECTJMUSIC]

Super helpful!

[@prateekpradhan80]

i am trying to resolve this use from two days... thank you

[@rockNbrain]

Tks bro, I've just face this in a couple days ago LOL😂

[@abhinasregmi9742]

wow 😮 Had troubles because of this now i now how to solve em

[@blueflaregamerz4375]

thanks that was helpfull

[@will_zzy]

So, is there a less verbose workaround for the breakpoint situation other than creating class name variables in advance? Can’t believe no one has created a simple solution to this common situation.

[@TravisHi_YT]

They have, it's called CSS

[@imjusthereforlolz]

@4:50, how do you make sure the TW classes in those objects are in the proper order when passed into TW?

[@Maximiliano-u4l]

That's the Neat Part, You Don't

[@allenwang3464]

Hi, Im curious about how to implement the 'md' function
writing multiple times the same prefix so annoying, thx

[@rakib17874]

what kind of voodo magic is this ?

[@yaldakarimi-l7y]

Thanks for the great content but what if we have sth like a color picker in our app and based on the color that user chooses we wanna store that hex value and then use it in another component as the background color, we would need sth like this: bg-${[color]} but this doesn't work either. that's an issue that I have,

[@abulazaiemabas5070]

This y i stopped using tw, u cant conditionally render classnames

[@havefun5519]

If I watched the video, I wouldn't be confused as to why my dynamic condition tailwind doesn't work.

[@amanrubey]

isn't it problematic that any of the text present in p , h1 tag etc can change the css?!

[@revadoniaprilio7709]

I have a dumb classes like this, its dynamically because depth is the depth of recursive function for access an object. Do you have any idea?

[@yourDecisi0n]

You could set a CSS variable for your padding and use the variable inside your tailwind class

[@yohendryy]

Interpolación sucks in general, i use maps for that

[@MushfiqurRahmanCD]

We faced a similar issue where we needed to get the classes from a CMS system. We basically dynamically generated the tailwind config with whitelisted class names.

[@suzanne_atkinson]

clever

[@bozzhik]

can i see example of your implementation? i have right now same task to do, also to get colors from CMS to have them as tailwind classes

[@clololown]

I hate this about tailwind, makes creating dynamic pattern generation utils impossible. For example, if you have a common string of tailwind utilities, you have to create a static map of it and add it to the content array to be able to use it from an object so you don't have to retype the same patterns all the time (i.e. flex-box classes, responsive spacing, etc)
So now, instead of automating mapping patterns using utility functions you have to manually create an object with a string or string array value. If you don't, tailwind ignores your generated strings. How annoying is that? Purging should be more configurable. I want to generate reusable tailwind utilities mapped to a pattern object using utility function. The only option seems to be a custom plugin with your own utilities to create reusable style patterns (basically mixins). Problem is, it's bad practice to use the shorthand tailwind utility classes, you have to write out the actual css using jss . Might as well create stylesheets with layers but then you can't integrate that as well into ts/js components as with cva or tv (I guess css/scss modules would be the way to go but god damn, that's annoying)
Do I really have to create a static output of the generated objects and then pull them into tailwind config synchronously for this to work properly? Surprised tailwind doesn't have a way to modify the content purge config

[@ashishboora3049]

Is this a good example of "it's not a bug, it's a feature"?

[@javascriptes]

Wow

[@khalidsaifullahfuad]

Wow I didn't know tailwind parsing engine is this dumb...

[@ahjiba]

wow this is so unintuitive

[@mrdee734]

This is why tailwind is not good.

[@succatash]

And animations are annoying

[@lets_see_777]

this is working for me: bg-${error?"red": "blue"}-600 even when these tokens are not included anywhere