Creating a scrollable element in Tailwind without the need for a scrollbar is easier than you think

Question

Creating a scrollable element in Tailwind without the need for a scrollbar is easier than you think

Is there a way to create a horizontal scroll navbar using Tailwind CSS without a scrollbar at the bottom, similar to this example (try reducing the width of your screen to see the scroll effect)?

https://getbootstrap.com/docs/5.0/examples/blog/

I attempted to achieve this using Tailwind CSS, but I couldn't find a way to eliminate the horizontal scrollbar that appears, like in the bootstrap example above. Can someone provide guidance on how to achieve this?

<ul class="flex overflow-x-auto whitespace-nowrap p-4">
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
</ul>

css bootstrap-4 tailwind-css bootstrap-5

Answer 1

Answer №1

If you want to conceal the scrollbar, you will have to customize it directly:

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

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

You can integrate these styles as Tailwind utilities with the help of a plugin in your configuration file: https://tailwindcss.com/docs/plugins#adding-utilities

For more information:

https://css-tricks.com/almanac/properties/s/scrollbar/ https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

Answer 2

If you want to conceal the scrollbar, you will have to customize it directly:

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

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

You can integrate these styles as Tailwind utilities with the help of a plugin in your configuration file: https://tailwindcss.com/docs/plugins#adding-utilities

For more information:

https://css-tricks.com/almanac/properties/s/scrollbar/ https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

Answer 3

Answer №2

Include the following code in your global CSS file (global.css, style.css, or any other file you use):

/*
    https://github.com/tailwindlabs/tailwindcss/discussions/2394
    https://github.com/tailwindlabs/tailwindcss/pull/5732
*/
@layer utilities {
    /* Chrome, Safari, and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

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

Next, apply the class no-scrollbar to elements where you want to hide the scrollbar. Remember to also use overflow-y-auto to maintain the scrollbar’s size automatically.

<div className="no-scrollbar overflow-y-auto">

Alternatively:

You may want to consider using the tailwindcss plugin designed specifically for hiding scrollbars.

https://github.com/reslear/tailwind-scrollbar-hide

Answer 4

Include the following code in your global CSS file (global.css, style.css, or any other file you use):

/*
    https://github.com/tailwindlabs/tailwindcss/discussions/2394
    https://github.com/tailwindlabs/tailwindcss/pull/5732
*/
@layer utilities {
    /* Chrome, Safari, and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

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

Next, apply the class no-scrollbar to elements where you want to hide the scrollbar. Remember to also use overflow-y-auto to maintain the scrollbar’s size automatically.

<div className="no-scrollbar overflow-y-auto">

Alternatively:

You may want to consider using the tailwindcss plugin designed specifically for hiding scrollbars.

https://github.com/reslear/tailwind-scrollbar-hide

Answer 5

Answer №3

In response to @wataru's inquiry in the comments, the method for incorporating these classes as a plugin into tailwind.config.js is outlined below:

const plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx}",
    "./components/**/*.{js,ts,jsx}",
  ], 
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          /* IE and Edge */
          '-ms-overflow-style': 'none',

          /* Firefox */
          'scrollbar-width': 'none',

          /* Safari and Chrome */
          '&::-webkit-scrollbar': {
            display: 'none'
          }
        }
      }
      )
    })
  ],
}

Key points to note are the const plugin declaration and the plugins: [] section

This technique was uncovered by examining the inner workings of the https://github.com/reslear/tailwind-scrollbar-hide repository, as shared by @jasonleonhard earlier.

Answer 6

In response to @wataru's inquiry in the comments, the method for incorporating these classes as a plugin into tailwind.config.js is outlined below:

const plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx}",
    "./components/**/*.{js,ts,jsx}",
  ], 
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          /* IE and Edge */
          '-ms-overflow-style': 'none',

          /* Firefox */
          'scrollbar-width': 'none',

          /* Safari and Chrome */
          '&::-webkit-scrollbar': {
            display: 'none'
          }
        }
      }
      )
    })
  ],
}

Key points to note are the const plugin declaration and the plugins: [] section

This technique was uncovered by examining the inner workings of the https://github.com/reslear/tailwind-scrollbar-hide repository, as shared by @jasonleonhard earlier.

Answer 7

Answer №4

By incorporating tailwind v3, you have the freedom to utilize custom values for this purpose.

Simply apply

[&::-webkit-scrollbar]:hidden

to the classList of your HTML element.

Answer 8

By incorporating tailwind v3, you have the freedom to utilize custom values for this purpose.

Simply apply

[&::-webkit-scrollbar]:hidden

to the classList of your HTML element.

Answer 9

Answer №5

Discover the powerful feature of Tailwind v3 known as arbitrary values. Learn how to leverage this functionality by checking out this link, Using arbitrary values. Take your time to absorb the information, as it's easy to miss on the first read. No need to rely solely on utilities for customization.

class="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"

This code snippet covers the settings for the top 3 browsers:

/* Safari and Chrome */

/* IE and Edge */

/* Firefox */

Answer 10

Discover the powerful feature of Tailwind v3 known as arbitrary values. Learn how to leverage this functionality by checking out this link, Using arbitrary values. Take your time to absorb the information, as it's easy to miss on the first read. No need to rely solely on utilities for customization.

class="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"

This code snippet covers the settings for the top 3 browsers:

/* Safari and Chrome */

/* IE and Edge */

/* Firefox */

Creating a scrollable element in Tailwind without the need for a scrollbar is easier than you think

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for creating semi-circular shapes using CSS gradients

What is the reason behind both paragraphs being displayed in a shade of blue in this snippet of code

Addressing duplicate CSS issues in Firebug?

What is the name of the scrolling header effect achieved in the following?

Dividers afloat - expanding current script with multiple additions

Having issues with mouse hover not functioning on button in internet explorer 8?

What is the reason behind fixing an overflow issue simply by moving the mouse outside of a container in IE7 and HTML?

Scaling boxes responsively according to screen size utilizing Bootstrap

What is the best method to add a background image to a short div element?

Changing the border color of a Material UI textbox is overriding the default style

Center an image both vertically and horizontally within an Owl Carousel arrow slider

Troubleshooting SCSS Issues in NextJS

The items in the Bootstrap dropdown are not displaying

Discover the ultimate guide to implement a captivating visual overlay using CSS

Attempting to change the primary color in Bootstrap is ineffective following a button click

Trigger a 'change password' notification using Javascript

Setting up TailwindCSS in Nuxt3: A step-by-step guide

Header Stability TransitionAndView

Tips for breaking out of the traditional 12 column grid using Bootstrap 4 flexbox grid system

Challenge with the Bootstrap 3 grid structure involving nesting