Theo's Typesafe Cult•2y ago

handling tailwind breakpoints in react

I am trying to figure out how to turn my webapp which was built for desktop into something more responsive. I am using t3 stack with tailwind. I know that tailwind provides breakpoints (sm, md, lg, etc), but im struggling to figure out a good way to change my layouts based on this. For instance, I have a sidebar in the desktop app that i want to turn into a bottom bar for the mobile app which uses a completely different component. How can my react code know if the screen size is sm, md, or lg?

4 Replies

cornflour•2y ago

so you have 2 options afaik: 1. have both of them on the jsx and hide one of them using tailwind, kinda like this

const Layout = () => {
  return (
    <>
      {/* This side bar will only show up when screen is smaller than md: breakpoint */}
      <Sidebar className="md:hidden" />

      {/* This bottom bar will only show up from md: breakpoint up */}
      <BottonBar className="hidden md:block" />
    </>
  )
}

const Layout = () => {
  return (
    <>
      {/* This side bar will only show up when screen is smaller than md: breakpoint */}
      <Sidebar className="md:hidden" />

      {/* This bottom bar will only show up from md: breakpoint up */}
      <BottonBar className="hidden md:block" />
    </>
  )
}

2. use js to check screen size and screen size changes, and conditionally renders the components accordingly. You can look at this SO to see how it's done https://stackoverflow.com/questions/66588340/custom-hook-for-window-resize

Stack Overflow

Custom hook for window resize

I'm working on creating a custom hook that captures the browser window size to let me know if it's mobile or not. At the moment, my issue is React telling me it can't retain the variable value of

TomOP•2y ago

huh.... those are both much less...... off the shelf than i woulda thought

mac•2y ago

in my experience, when im making a component like a navbar / sidebar or something. I usually make a mobile version first, and make it hidden over a certain breakpoint (usually sm:). Then I just make the rest of the component(s) per normal.

TomOP•2y ago

Yeah. That’s what I was going to do. I was more asking about HOW to hide it. I could do the “hidden sm: block” trick but I don’t like the idea that both ui’s are always alive in the dom And I’m using mui for some of my components and it would be nice to (for instance) set size=“small” on the button at some breakpoints she remove it at others Instead of having 2 buttons that are effectively the same but one is hidden

Gaming

Programming

handling tailwind breakpoints in react