Tailwind CSS 自定义滚动条

在真实的企业级开发中，如果想要实现自定义滚动条样式，虽然可以通过引入第三方 JavaScript 滚动条插件来实现，但为了区区一个滚动条增加项目体积显然不够优雅。

如果使用了 Tailwind CSS，我们完全可以使用纯 CSS 伪元素的方式来实现。

Tailwind CSS 自定义滚动条原理

在 Webkit 内核的浏览器（如 Chrome、Edge、Safari）中，修改滚动条主要依赖以下 3 个伪元素：

::-webkit-scrollbar：整个滚动条的尺寸（宽度和高度）。
::-webkit-scrollbar-track：滚动条的轨道（背景）。
::-webkit-scrollbar-thumb：滚动条的滑块（可以被拖动的部分）。

在 Tailwind CSS 中，最规范的做法是在全局样式文件中，使用 @utility 指令来将这些伪元素封装成自定义工具类（如下所示），然后在 HTML 中像普通类名一样直接使用。

/* 使用 @utility 封装一个名为 scrollbar-lvye 的工具类 */
@utility scrollbar-lvye {
    /* 兼容 Firefox  */
    scrollbar-width: thin;
    scrollbar-color: #10b981 #ecfdf5;

    /* 兼容 Webkit 内核浏览器 */
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    &::-webkit-scrollbar-track {
        background-color: #ecfdf5;
        border-radius: 9999px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #10b981;
        border-radius: 9999px;
    }
    &::-webkit-scrollbar-thumb:hover {
        background-color: #059669;
    }
}

Tailwind CSS 自定义滚动条示例

接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来自定义滚动条样式。

示例：自定义滚动条

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
        @utility scrollbar-lvye {
            /* 兼容 Firefox  */
            scrollbar-width: thin;
            scrollbar-color: #10b981 #ecfdf5;

            /* 兼容 Webkit 内核浏览器 */
            &::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }
            &::-webkit-scrollbar-track {
                background-color: #ecfdf5;
                border-radius: 9999px;
            }
            &::-webkit-scrollbar-thumb {
                background-color: #10b981;
                border-radius: 9999px;
            }
            &::-webkit-scrollbar-thumb:hover {
                background-color: #059669;
            }
        }
    </style>
</head>
<body class="p-10 bg-green-50">
    <div class="w-full max-w-sm bg-white rounded-3xl shadow-sm border border-emerald-100 overflow-hidden">
        <div class="p-4 bg-emerald-500 text-white font-bold text-center">
            匆匆
        </div>
        <div class="h-64 p-6 overflow-y-auto scrollbar-lvye text-emerald-900/80 leading-relaxed space-y-4">
            <p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
            <p>……</p>
            <p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸地回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
            <p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
        </div>
    </div>
</body>
</html>

页面效果如下图所示。

Tailwind CSS 自定义滚动条

分析：

在这个例子中，我们在 style 标签中使用 @utility 指令封装了一个 “scrollbar-lvye” 类名。该类用于集中处理复杂的伪元素逻辑（包含了 width、background-color 以及 border-radius 等）。

然后在 HTML 代码中，我们只需要为指定元素加上这个 “scrollbar-lvye” 类名，就可以轻松实现自定义滚动条样式了。