The*_*der 4 html css tailwind-css
所以我使用 Tailwind CSS，但遇到了问题。所以我正在学习如何在顺风 CSS 上进行滚动捕捉。滚动对齐 y 有效，但滚动对齐 x 不起作用。我尝试了一切让我的代码滚动 snap x 但它不起作用。你们中的任何人都可以修复我的顺风代码并使其滚动 snap x 吗？这是我的代码：
@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>你快到了。您唯一需要做的就是将该shrink-0类添加到您的捕捉 div 中：
@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="flex snap-x snap-mandatory h-screen w-full mx:auto overflow-scroll">
<div class="snap-start shrink-0 bg-amber-200 grid w-full h-screen place-items-center text-8xl">1</div>
<div class="snap-start shrink-0 bg-blue-200 grid w-screen h-screen place-items-center text-8xl">2</div>
<div class="snap-start shrink-0 bg-orange-200 grid w-screen h-screen place-items-center text-8xl">3</div>
<div class="snap-start shrink-0 bg-green-200 grid w-screen h-screen place-items-center text-8xl">4</div>
</div>
</body>
</html>