How to Rearrange Code Blocks with React and Tailwind CSS

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