2 replies

Managing tailwind breakpoints and SSR

I asked a similar question yesterday (questionshandling tailwind breakpoints in react) but this is more about how the original problem relates to SSR.

I have a application that I developed for desktop that I am trying to make responsive. Yesterday I asked about how to access tailwind breakpoints in my js. After getting some answers and doing some more googling I came up with a custom hook for detecting screen size and stashing it in a context for any of my components to use. However, the hook is based on reading window.innerWidth and window.innerHeight inside of a useEffect() so SSR ends up kinda broken. The app loads in assuming it is a desktop app and then runs the hook and the layout shifts.

The only way I can think to avoid this is to use (for example)

className="hidden lg:block"

className="hidden lg:block"

. To me, the idea that each page has all components for every size variation baked in seems like a nightmare to manage. It also seems like it will bloat my code significantly. For instance, I am using some MUI buttons that i want to be

size=large

size=large

on desktop and

size="medium"

size="medium"

on mobile. If I am going to do this in tailwind alone ill need to have multiple copies of the same button in the DOM each with different props.

Is there any way to make my app responsive while doing SSR and keeping the code manageable? I would appreciate a pointer to any codebases I could look at for inspiration.