'Tailwind CSS flexbox gap is not working on iPhone Chrome

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

Here's my code

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

on desktop enter image description here

on iphone chrome enter image description here

csstailwind-css


Solution 1:[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">

Solution 2:[2]

Currently, 'space-' is the best workaround for replacing gaps however you only need to do that for your flex gaps, grid gaps work perfectly fine on iOS, so if you are going to refactor you don't have to refactor your grids at least.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 PCPbiscuit

Related Questions