Skip to content

Instantly share code, notes, and snippets.

@yungwarlock
Last active September 30, 2023 15:18
Show Gist options
  • Save yungwarlock/c46ffcd1aa2cc580c3d04c46f7c0f95c to your computer and use it in GitHub Desktop.
Save yungwarlock/c46ffcd1aa2cc580c3d04c46f7c0f95c to your computer and use it in GitHub Desktop.
Tailwind hidescrollbar
@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 */
}
}
}
"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>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment