如何解决在tailwind-css中不能在y或x方向上进行滚动捕捉所以我在react中使用tailwind。当我尝试滚动

所以我在react中使用tailwind。当我尝试滚动snap x时，它在x轴上滑动，但没有扣住。当我尝试滚动snap y时，它收缩了容器组件中所有的div。所以我的问题是，滚动捕捉x和y都不工作。能否请你修复这两个问题？如果你对我的问题有任何疑问，我可以回答。这是我的代码（代码设置为scroll snap y，但我在scroll snap x和scroll snap y上都需要帮助）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Get Information Before Comps Start" />
    <meta name="keywords" content="Education, Study" />
    <meta name="author" content="Srimaan, Nahom" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body id="bodyWithId">
    <script type="text/babel">
      function ItemOne() {
        return (
          <div className="snap-start bg-blue-200 grid w-screen h-screen place-items-center text-8xl">
            1
          </div>
        );
      }

      function ItemTwo() {
        return (
          <div className="snap-start bg-orange-200 grid w-screen h-screen place-items-center text-8xl">
            2
          </div>
        );
      }

      function ItemThree() {
        return (
          <div className="snap-start bg-green-200 grid w-screen h-screen place-items-center text-8xl">
            3
          </div>
        );
      }

      function Container() {
        return <div className="flex snap-y h-screen w-full mx:auto overflow-scroll">
          <ItemOne />
          <ItemTwo />
          <ItemThree />
        </div>;
      }

      ReactDOM.render(<Container />, document.getElementById("bodyWithId"));
    </script>
  </body>
</html>