Tailwindcss 间隙在 iphone chrome 上不起作用

Question

I am facing some problem on css gap. Why it is not working on iphone?

Here my code

<div className="flex flex-col gap-2">

on desktop

on iphone chrome

Answer 1

You can achieve spacing on Tailwind flexbox with space- classes.

<div className="flex flex-col space-x-4">

By the way; applying gap class names on Tailwind flexbox is not a generic method. Gap sizing works only with grid containers.

<div className="grid gap-1 grid-cols-2">

Answer 2

目前，'space-' 是替换间隙的最佳解决方法，但是您只需要为弹性间隙执行此操作，网格间隙在 iOS 上工作得非常好，因此如果您要重构，则不必在以下位置重构网格至少。