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:
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&display=swap');
* {
font-family: 'Barlow Condensed', sans-serif;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Project Impossible</title>
</head>
<body>
<div class="snap-y snap-mandatory h-screen w-screen mx:auto overflow-scroll">
<div class="snap-start bg-amber-200 grid w-screen h-screen place-items-center text-8xl">1</div>
<div class="snap-start bg-blue-200 grid w-screen h-screen place-items-center text-8xl">2</div>
<div class="snap-start bg-orange-200 grid w-screen h-screen place-items-center text-8xl">3</div>
<div class="snap-start bg-green-200 grid w-screen h-screen place-items-center text-8xl">4</div>
</div>
</body>
</html>