Tailwind CSS scroll snap x is not working, have tried a lot of time

Tailwind CSS scroll snap x is not working, have tried a lot of time.

I’m not sure if it is a bug here, can you help me find it?

Here is my code:

        <div class="snap-mandatory snap-x">
          <div class="mx-auto md:max-w-2xl flex justify-center bg-[#821c20] rounded-xl shadow-lg overflow-hidden snap-center">
            <div class="md:flex">
              <div class="md:shrink-0">
                <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://files.catbox.moe/whnmix.png" alt="Modern building architecture"></img>
              </div>
              <div class="p-8">
                <div class="uppercase tracking-wide text-sm text-[#166b41] font-semibold">Test</div>
                <p class="mt-2 text-white">Test<a class="underline decoration-pink-500">Test</a>。</p>
              </div>
            </div>
          </div>

          <div class="mx-auto md:max-w-2xl flex justify-center bg-[#821c20] rounded-xl shadow-lg overflow-hidden snap-center">
            <div class="md:flex">
              <div class="md:shrink-0">
                <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://files.catbox.moe/whnmix.png" alt="Modern building architecture"></img>
              </div>
              <div class="p-8">
                <div class="uppercase tracking-wide text-sm text-[#166b41] font-semibold">Test</div>
                <p class="mt-2 text-white">Test<a class="underline decoration-pink-500">Test</a>。</p>
              </div>
            </div>
          </div>
        </div>

The effect of the code now is that the two components are aligned vertically, with no scrolling.

I want the cards to be parallel and scrollable.