How to create scrollable element in Tailwind without a scrollbar

Creating scrollable elements without displaying scrollbars is a common UI design choice that makes the user interface appear cleaner and more modern. In Tailwind CSS, we can achieve this effect through several steps.

First, ensure that the necessary utility classes are enabled in the tailwind.config.js file. Specifically, for scrolling configurations, verify that overflow-related classes are activated.

Next, you can use the following Tailwind CSS classes to create a scrollable element without displaying scrollbars:

1. Set container dimensions and overflow behavior:
   • Use h-[value] or max-h-[value] to define the element's height.
   • Apply overflow-y-auto to enable auto-scrolling on the Y-axis.
   • Use scrollbar-hide to hide the scrollbar (this requires enabling the plugin in the configuration file).

For example, suppose you want to create a scrollable list with a height of 256px without displaying scrollbars. You can implement it as:

html
<div class="max-h-64 overflow-y-auto scrollbar-hide">
  <!-- List content -->
</div>

Here, the max-h-64 class sets the container's maximum height to 256px (since 1 unit equals 4px). overflow-y-auto enables vertical scrolling, and scrollbar-hide ensures the scrollbar remains hidden.

Practical Example:

Suppose you are developing a chat application and need to include a message history view without displaying scrollbars in the chat interface. You can configure the message container as follows:

html
<div class="max-h-96 overflow-y-auto scrollbar-hide p-4">
  <div class="mb-4">
    <p>User 1: Hello!</p>
  </div>
  <div class="mb-4">
    <p>User 2: Hello! Any new messages?</p>
  </div>
  <!-- More messages -->
</div>

In this example, max-h-96 sets the maximum height to 384px, overflow-y-auto enables vertical scrolling, scrollbar-hide ensures the scrollbar is hidden, and p-4 provides consistent padding.

With this setup, users can browse messages without visual interruptions from scrollbars, resulting in a cleaner interface.