Why tailwindcss layout with flex does not work on iPads?

Question

I have 4 blocks of label/checkbox and I want:

• On small devices to show 1 block.
• On iPads show 2 blocks.
• On all big devices to show all 4 blocks

With html like :

<div class="sm:flex">
  <div class="w-full sm:w-12/12 md:w-6/12 xl:w-3/12 p-1 pl-2 pr-2 mt-1">
    <div class="flex">
      <span class="mr-2">In news: </span>
      <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in d2">
        <input type="checkbox" wire:model.live="inNews" name="inNews" id="inNews" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
      </div>
    </div>
  </div>

  <div class="w-full sm:w-12/12 md:w-6/12 xl:w-3/12 p-1 pl-2 pr-2 mt-1">
    <div class="flex">
      <span class="mr-2">In users: </span>
      <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in d2">
        <input type="checkbox" wire:model.live="inUsers" name="inUsers" id="inUsers" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
      </div>
    </div>
  </div>

  <div class="w-full sm:w-12/12 md:w-6/12 xl:w-3/12 p-1 pl-2 pr-2 mt-1">
    <div class="flex">
      <span class="mr-2">In app images: </span>
      <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in d2">
        <input type="checkbox" wire:model.live="inAppImages" name="inAppImages" id="inAppImages" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
      </div>
    </div>
  </div>

  <div class="w-full sm:w-12/12 md:w-6/12 xl:w-3/12 p-1 pl-2 pr-2 mt-1">
    <div class="flex">
      <span class="mr-2">In news categories: </span>
      <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in d2">
        <input type="checkbox" wire:model.live="inNewsCategories" name="inNewsCategories" id="inNewsCategories" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
      </div>
    </div>
  </div>
</div>

However, it does not work on iPads – I have 4 blocks anyway.

How to fix it ?

"laravel/framework": "^10.48.7",
"tailwindcss": "^3.4.1",
"livewire/livewire": "^3.4.10",

Answer 1

There could be a couple things happening.

The most likely cause is that you don't have flex-wrap set on the container so the items don't automatically move to a new line.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.5/tailwind.min.css" rel="stylesheet"/>
<div class="sm:flex flex-wrap">
  <div class="w-full md:w-6/12 xl:w-3/12 p-1 pl-2 pr-2 mt-1">
    <div class="flex">
      <span class="mr-2">In news: </span>
      <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in d2">
        <input type="checkbox" wire:model.live="inNews" name="inNews" id="inNews" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
      </div>
    </div>
  </div>

  <div class="w-full sm:w-12/12 md:w-6/12 xl:w-3/12 p-1 pl-2 pr-2 mt-1">
    <div class="flex">
      <span class="mr-2">In users: </span>
      <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in d2">
        <input type="checkbox" wire:model.live="inUsers" name="inUsers" id="inUsers" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
      </div>
    </div>
  </div>

  <div class="w-full sm:w-12/12 md:w-6/12 xl:w-3/12 p-1 pl-2 pr-2 mt-1">
    <div class="flex">
      <span class="mr-2">In app images: </span>
      <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in d2">
        <input type="checkbox" wire:model.live="inAppImages" name="inAppImages" id="inAppImages" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
      </div>
    </div>
  </div>

  <div class="w-full sm:w-12/12 md:w-6/12 xl:w-3/12 p-1 pl-2 pr-2 mt-1">
    <div class="flex">
      <span class="mr-2">In news categories: </span>
      <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in d2">
        <input type="checkbox" wire:model.live="inNewsCategories" name="inNewsCategories" id="inNewsCategories" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
      </div>
    </div>
  </div>
</div>

Other than that, it depends on whether you are using a standard tailwind config as well as the iPad you're designing for.

• iPad Pro has a screen resolution of 1024x1366 (This is the lg breakpoint when viewed in portrait, and xl when viewed in landscape)
• iPad Air has a screen resolution of 820x1180 (This is the md breakpoint when viewed in portrait, and lg when viewed in landscape)
• iPad Mini has a screen resolution of 768x1024 (This is the md breakpoint when viewed in portrait, and lg when viewed in landscape)

Hope this helps!