如何使用Tailwind CSS更改滚动条样式

Tailwind没有提供任何内置的实用程序来样式化滚动条，但是您可以使用CSS自定义滚动条的外观。要使用Tailwind更改滚动条的外观，我们需要使用 scrollbar-* 类。这些类用于自定义滚动条的各个方面，例如宽度、颜色和行为。

语法

::-webkit-scrollbar {
    /* Customize the scrollbar width */
}

::-webkit-scrollbar-track {
    /* Customize the scrollbar track */
}

::-webkit-scrollbar-thumb {
    /* Customize the scrollbar thumb */
}

注意： 它适用于像Chrome，Safari等基于WebKit的浏览器。

方法

为了在网页上设置自定义样式的滚动条，我们将使用滚动条类和WebKit选择器。我们将定义CSS属性，如颜色，背景，悬停，宽度等来改变滚动条的外观。

安装步骤

步骤1： 创建一个新的Next项目：

您可以使用以下命令创建一个新的Next应用程序。

npx create-next-app scrollbar

步骤2: 安装 Tailwind

在创建下一个项目后，打开项目的根目录，并使用以下命令安装 tailwind 的依赖项。

npm install -D tailwindcss postcss autoprefixer

步骤3： 创建Tailwind配置文件

运行以下命令来创建一个Tailwind配置文件，该文件可以用于扩展Tailwind的功能。

npx tailwindcss init -p

项目结构

如何使用Tailwind CSS更改滚动条样式

步骤4：我们需要配置文件路径，以便使Tailwind正常工作。因此，在您的tailwind.config.js文件中添加以下配置。

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

步骤5： 添加Tailwind指令

在你的/styles/global.css文件中，添加Tailwind CSS的层级指令。

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

示例1： 在这个示例中，我们将在全局CSS文件中添加滚动条样式。

JavaScript

// pages/index.js
 
export default function Home() {
    return (
        <div className="min-h-[200vw]">
            <img className="fixed top-1/2 left-1/4 w-96"
                src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg"
                alt="" />
        </div>
    )
}

CSS

/* global.css */
 
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* width */
::-webkit-scrollbar {
    width: 10px;
}
 
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}
 
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

运行步骤： 在项目目录中使用以下命令运行应用程序

npm run dev

输出：

如何使用Tailwind CSS更改滚动条样式

示例2： 此外，如果你想为暗色主题添加滚动条，你可以在global.css文件中自定义它。

JavaScript

// pages.index.js
 
export default function Home() {
    return (
        <div className="min-h-[200vw]">
            <img className="fixed top-1/2 left-1/4 w-96"
                src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg"
                alt="" />
        </div>
    )
}

CSS

/* global.css*/
 
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* width */
::-webkit-scrollbar {
    width: 10px;
}
 
/* Track */
::-webkit-scrollbar-track {
    background: #888;
    border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 5px;
}
 
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

运行步骤：

在项目目录中使用以下命令来运行应用：