要让你的Reactjs网站水平滚动，使用Vite和Tailwind构建，你需要设置一些CSS属性，还需要添加一些滚动事件。
1 -设置一个容器，用于 Package 要水平滚动的所有内容。将其“overflow-x”属性设置为“scroll”，以允许水平滚动内容。例如：

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

2 -确保容器内的内容设置为必要的全宽。您可以通过将内部项目的宽度设置为“100 vw”来实现这一点。例如：

.item {
  width: 100vw;
}

3 -向容器添加滚动事件，以允许容器使用鼠标滚轮滚动。您可以使用容器元素上的“onWheel”属性执行此操作。例如：

import React from 'react';

function App() {
  const handleScroll = (event) => {
    const container = event.target;
    const scrollAmount = event.deltaY;
    container.scrollTo({
      top: 0,
      left: container.scrollLeft + scrollAmount,
      behavior: 'smooth'
    });
  };

  return (
    <div>
      <header>
        {/* Header content */}
      </header>
      <div className="container" onWheel={handleScroll}>
        <div className="item">
          {/* Item content */}
        </div>
        <div className="item">
          {/* Item content */}
        </div>
        <div className="item">
          {/* Item content */}
        </div>
      </div>
      <footer>
        {/* Footer content */}
      </footer>
    </div>
  );
}

4 -添加滚动条以允许用户在可滚动内容中导航。可以使用“：：-webkit-scrollbar”元素并设置其属性来完成此操作。例如：

.container::-webkit-scrollbar {
  height: 8px;
}

.container::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 10px;
}

.container::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px;
}

确保“container”类包含滚动条。