laravel+tailwindCSSでレスポンシブが上手くいかない

実現したいこと

デベロッパーツールで見たスマホプレビューをスマホ実機でも実現したい。

前提

デベロッパーツールで見た画面。

スマホの実機で見た画面

デベロッパーツールで見る限りエラーは出ていません。

該当のソースコード

head/header部分
1<head>
2  <meta charset="UTF-8" />
3  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
4  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
5  <title>PureLeaf</title>
6  <link rel="stylesheet" href="{{ asset('css/tea/style.css') }}" />
7  <link rel="icon" type="image/png" href="/images/tea/tea.png" />
8  <link
9    rel="stylesheet"
10    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
12    crossorigin="anonymous"
13    referrerpolicy="no-referrer"
14  />
15  @vite('resources/css/app.css')
16</head>
17<body>
18<!-- header section -->
19<header class="hero h-[100vh] relative">
20  <!-- shop name -->
21  <h1
22    class="plus absolute top-[1rem] left-[1rem] text-4xl md:text-6xl z-10"
23  >
24    PureLeaf
25  </h1>
26  <p
27    class="fixed top-[1rem] right-[1rem] text-xl md:text-3xl z-10 reserve hover:cursor-pointer"
28  >
29    ご購入 <i class="fa-solid fa-cart-shopping"></i>
30  </p>
31  <!-- policy -->
32  <div class="policy-container relative z-10">
33    <h2
34      class="header-policy absolute top-[8rem] md:top-[12rem] left-[1rem] md:left-[4rem] text-4xl md:text-7xl"
35    >
36      100%オーガニック
37    </h2>
38    <h2
39      class="header-policy absolute top-[11rem] md:top-[18rem] left-[1rem] md:left-[4rem] text-xl md:text-2xl"
40    >
41      茶葉の栽培に厳しいオーガニック基準を適用しています。
42    </h2>
43  </div>
44  <img
45    class="absolute top-[15rem] md:top-[13rem] right-[-5rem] md:w-[40vw] md:h-auto object-cover ml-auto me-[5rem]"
46    src="{{ asset('images/tea/hero.jpg') }}"
47    alt="hero"
48  />
49  <!-- sns -->
50  <ul
51    class="absolute bottom-[1rem] md:bottom-[1rem] ml-[1rem] list-none z-10 plus list-none"
52  >
53    <li class="sns text-xl hover:cursor-pointer">
54      <i class="fa-brands fa-twitter me-2"></i>Twitter
55    </li>
56    <li class="sns text-xl hover:cursor-pointer">
57      <i class="fa-brands fa-instagram me-2"></i>Instagram
58    </li>
59    <li class="sns text-xl hover:cursor-pointer">
60      <i class="fa-brands fa-line me-2"></i>LINE
61    </li>
62  </ul>
63</header>