Tailwind hidescrollbar

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer utilities {
  @layer components {

    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */
    }
  }
}

page.tsx

"use client";

import React from "react";

export default function Home() {

  return (
    <main className="flex flex-col gap-6 overflow-x-hidden pb-10">
      {/** Add no-scrollbar class name to className **/}
      <div className="flex flex-row gap-2 overflow-y-hidden overflow-x-auto no-scrollbar">
        <div className="bg-red-600 min-w-[20rem] h-56"></div>
        <div className="bg-red-600 min-w-[20rem] h-56"></div>
        <div className="bg-red-600 min-w-[20rem] h-56"></div>
        <div className="bg-red-600 min-w-[20rem] h-56"></div>
        <div className="bg-red-600 min-w-[20rem] h-56"></div>
        <div className="bg-red-600 min-w-[20rem] h-56"></div>
        <div className="bg-red-600 min-w-[20rem] h-56"></div>
        <div className="bg-red-600 min-w-[20rem] h-56"></div>
      </div>
    </main>
  );
}