Tailwind CSS flexbox gap is not working on iPhone Chrome

user_13991896 0
Viewed 6964

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

tailwind-css css
2 Answers

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">
user_101247590

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.

user_142605300
Related