Tailwindcss scrollbar not displaying

Question

<div className="col-span-3 h-screen overflow-y-scroll   ">
      <ul className="m-5">
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faRss}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Feed</span>
        </li>
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faCommentDots}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Comments</span>
        </li>
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faVideo}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Videos</span>
        </li>
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faUserFriends}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Groups</span>
        </li>
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faBookmark}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Bookmarks</span>
        </li>
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faQuestion}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Questions</span>
        </li>
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faBriefcase}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Jobs</span>
        </li>
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faCalendar}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Events</span>
        </li>
        <li className="flex items-center mb-4">
          <FontAwesomeIcon
            icon={faGraduationCap}
            className="m-2"
            color="black"
            size="lg"
          />
          <span className="ml-3">Courses</span>
        </li>
        <button className="bg-gray-200 border-none p-2 rounded">
          Show More
        </button>
      </ul>
      <hr className="m-2" />
      <ul className="">
        <li className="flex m-4 items-center">
          <img src={one} />
          <span className="ml-2">Jane Doe</span>
        </li>
        <li className="flex m-4 items-center">
          <img src={one} />
          <span className="ml-2">Jane Doe</span>
        </li>
        <li className="flex m-4 items-center">
          <img src={one} />
          <span className="ml-2">Jane Doe</span>
        </li>
        <li className="flex m-4 items-center">
          <img src={one} />
          <span className="ml-2">Jane Doe</span>
        </li>
        <li className="flex m-4 items-center">
          <img src={one} />
          <span className="ml-2">Jane Doe</span>
        </li>
        <li className="flex m-4 items-center">
          <img src={one} />
          <span className="ml-2">Jane Doe</span>
        </li>
        <li className="flex m-4 items-center">
          <img src={one} />
          <span className="ml-2">Jane Doe</span>
        </li>
      </ul>
    </div>

I want users to be able to scroll on the left side of the page to see their friends or anyone they follow. I'm trying to add a scroll option as the user's following grows. It adds the feature to scroll as the users grow but there's no way to scroll without scrolling the whole page. How can I fix this issue?.

Answer 1

Check all the connected CSS files (most likely in your index.css file for react) to make sure you didn't add this CSS line

::-webkit-scrollbar{
    display: none;
}