当逆序在 Tailwind 中有断点时，儿童间距不起作用

Question

我有一个使用 flex-row 和 flex-row-reverse 在图像和文本块之间交替的着陆页：

我可以通过在映射列表时翻转顺序来非常简单地实现这一点，而无需更改 div 的顺序：

idx % 2 === 0 ? 'flex-row-reverse space-x-reverse' : 'flex-row'

当我在移动设备上意识到我希望它们像这样堆叠时出现了问题：

我模拟了 codesandbox 中发生的事情，就像这样：

<div
  class="flex items-center flex-col mb-10 sm:flex-row sm:space-x-10"
>
  <div class="w-1/2 bg-red-500">first</div>
  <div class="w-1/2 bg-blue-600">second</div>
</div>
<div
  class="flex items-center flex-col mb-10 sm:flex-row-reverse space-x-reverse sm:space-x-10"
>
  <div class="w-1/2 bg-red-500">first</div>
  <div class="w-1/2 bg-blue-600">second</div>
</div>

移动版本看起来符合预期，但更大的断点看起来好像 space-x-reverse 正在被识别：

知道如何让反转的行识别 space-x-reverse 吗？

Answer 1

您在 space-x-reverse 上缺少 sm: 前缀。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="flex items-center flex-col mb-10 sm:flex-row sm:space-x-10">
  <div class="w-1/2 bg-red-500">first</div>
  <div class="w-1/2 bg-blue-600">second</div>
</div>
<div class="flex items-center flex-col mb-10 sm:flex-row-reverse sm:space-x-reverse sm:space-x-10">
  <div class="w-1/2 bg-red-500">first</div>
  <div class="w-1/2 bg-blue-600">second</div>
</div>

当逆序在 Tailwind 中有断点时，儿童间距不起作用

Children spacing not working when reversed order has breakpoint in Tailwind

flexbox

postcss

tailwind-css

tailwind-in-js