Published on

How to Hide Scrollbar, but while still being able to scroll in Tailwind CSS?

How to Hide Scrollbar, but while still being able to scroll in Tailwind CSS?

How to Hide Scrollbar, but while still being able to scroll in Tailwind CSS?

Hide Scrollbar in Tailwind CSS

The key to hiding scrollbars lies in manipulating the ::-webkit-scrollbar property.

Scrollbars, while essential for navigating content, can sometimes disrupt the visual harmony of a web page.

Whether you are looking to achieve a sleek and modern appearance or simply want to declutter your design, hiding scrollbars can significantly contribute to a seamless user experience. With Tailwind CSS, achieving this effect becomes an effortless endeavor.

Here's how you can do it effectively:

<div class="hide-scrollbar">content</div>

Css Code to Hide Scrollbar

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

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

Equivalent Tailwind Css Code to Hide Scrollbar

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

@layer utilities {
  @variants responsive {
    /* Hide scrollbar for Chrome, Safari, and Opera */
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }

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