如何在 TailwindCSS 中隐藏元素上的滚动条

你好👋，

您不希望您的 UI 看起来像这样吗？

前

最终结果

scrollbar以下是使用 TailwindCss 隐藏 HTML 元素时需要遵循的两个步骤。

步骤一

转到您的global.css文件styles/global.css并粘贴以下代码：

/* global index.css */ 
@tailwind base;
@tailwind components;
@tailwind utilities;

/* add the code bellow */ 
@layer utilities {
      /* 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 */
    }
  }

此时我们添加了、和中::-webkit-scrollbar的滚动条样式作为目标。ChromeSafariEdgeOpera

no-scrollbar是我们将要用来隐藏滚动条的类。

第二步

现在用它no-scrollbar来隐藏元素中的滚动条。像这样：

<div className="w-full h-42 overflow-y-scroll no-scrollbar">...</div>

我希望你觉得这篇文章有用。

欢迎通过Twitter与我联系

文章来源：https://dev.to/derick1530/how-to-create-scrollable-element-in-tailwind-without-a-scrollbar-4mbd