When developing a Next.js website, you may encounter the need to rearrange a React component within your markup based on the screen size. In my case, I wanted to position a Sidebar component on the left side of the screen for larger displays, but before the content on smaller screens.
Initially, I was unsure how to achieve this transition without extensively modifying the HTML markup and CSS. That’s when I turned to Tailwind CSS for a straightforward solution.
Here’s what I did: I included the component twice in the code, applying the class hidden xl:block
to the part meant for larger screens, and xl:hidden
to the snippet intended for smaller screens.
<div className="hidden xl:block">
<Sidebar />
</div>
...
<div className="xl:hidden">
<Sidebar />
</div>
One potential drawback is that the component is rendered twice. However, since this is a simple presentational component without any logic, it was a compromise I deemed acceptable.
Tags: React, Tailwind CSS, Next.js