当反向顺序在 Tailwind 中有断点时,子间距不起作用
Posted
技术标签:
【中文标题】当反向顺序在 Tailwind 中有断点时,子间距不起作用【英文标题】:Children spacing not working when reversed order has breakpoint in Tailwind 【发布时间】:2021-05-06 00:23:59 【问题描述】:我有一个登录页面,它使用 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
吗?
【问题讨论】:
【参考方案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 中有断点时,子间距不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量
即使隐藏了排列的子视图,UIStackView 似乎也会堆叠间距