This got me thinking. If doing something like this where you are using a javascript variable to add a tailwind class, does this mean javascript bundle has to load for that css to show. How would this work with Server side rendering.
Tailwind, when creating the bundle, will scan your code and find all of the strings that match Tailwind classes, and create the .css file with the CSS rules for all of those. Therefor the cursor-not-allowed class will be present.
You app will need the JS bundle loaded to handle the actual props.disabled check, so if you are doing SSR or SSG then its possible that the pre-rendered HTML and CSS load before the JS bundle.
The difference here is that Tailwind has already generated the "cursor-not-allowed" class and injected it into a CSS file at build time. There's no CSS injection happening during runtime at all, just toggling classes.
Nope, there's no runtime so the JS bundle isn't involved here at all. In the end, Tailwind outputs a plain old CSS file, the way it's generated is just a bit funky.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
className=
items-center flex gap-2 text-sm justify-center ${props.disabled && 'cursor-not-allowed'}This got me thinking. If doing something like this where you are using a javascript variable to add a tailwind class, does this mean javascript bundle has to load for that css to show. How would this work with Server side rendering.
Tailwind, when creating the bundle, will scan your code and find all of the strings that match Tailwind classes, and create the .css file with the CSS rules for all of those. Therefor the cursor-not-allowed class will be present.
You app will need the JS bundle loaded to handle the actual props.disabled check, so if you are doing SSR or SSG then its possible that the pre-rendered HTML and CSS load before the JS bundle.
Thanks for explaining that. It is as I thought. This is the difference between FCP (first contentful paint) and TTI(Time to interactive)
twind is good choose
The difference here is that Tailwind has already generated the "cursor-not-allowed" class and injected it into a CSS file at build time. There's no CSS injection happening during runtime at all, just toggling classes.
I see thanks. Would this require the JS bundle to load in to work though?
Nope, there's no runtime so the JS bundle isn't involved here at all. In the end, Tailwind outputs a plain old CSS file, the way it's generated is just a bit funky.