title: My tailwind scroll snap x is not working, can you please find a solution to this?
body: <p>So I use Tailwind CSS, and I ran into a problem. So I am learning how to do scroll snap on tailwind CSS. Scroll snap y works, but scroll snap x does not work. I tried everything to make my code do scroll snap x but it would not work. Can any of you please fix my tailwind code and make it do scroll snap x please? Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&amp;display=swap');
          * {
              font-family: 'Barlow Condensed', sans-serif;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
  
      &lt;title&gt;Project Impossible&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="snap-y snap-mandatory h-screen w-screen mx:auto overflow-scroll"&gt;
          &lt;div class="snap-start bg-amber-200 grid w-screen h-screen place-items-center  text-8xl"&gt;1&lt;/div&gt;
          &lt;div class="snap-start bg-blue-200 grid w-screen h-screen place-items-center  text-8xl"&gt;2&lt;/div&gt;
          &lt;div class="snap-start bg-orange-200 grid w-screen h-screen place-items-center  text-8xl"&gt;3&lt;/div&gt;
          &lt;div class="snap-start bg-green-200 grid w-screen h-screen place-items-center text-8xl"&gt;4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>