如何用React和Tailwind来移动代码块

在做Next.js网站时，我需要根据屏幕的大小，将React组件移到我的标记中的一个完全不同的地方。

特别是我有一个Sidebar组件，我想在大屏幕上放在屏幕的左边，但在小屏幕上放在内容之前。

由于我组织HTML标记和CSS的方式，我并不清楚如何在不重写很大一部分的情况下进行这种转换。

因此，我期待着Tailwind为我提供一个好的解决方案。

而这就是方法。我在屏幕上添加了两次组件，为 "大屏幕 "部分分配了类hidden xl:block ，为小屏幕分配了xl:hidden 。

<div className="hidden xl:block">
  <Sidebar />
</div>

...

<div className="xl:hidden">
  <Sidebar />
</div>

当然，缺点是组件被渲染了两次，但由于这是一个没有逻辑的简单展示组件，这是一个我可以接受的妥协。