Tailwindcss gap is not working on iphone chrome

Question

I am facing some problem with CSS flexbox gap. Why it is not working on iPhone?

Here's 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">