无法使用Tailwind CSS样式滚动条

Question

我正在处理一个Next.js项目，尝试使用Tailwind CSS来样式化列表的滚动条。然而，滚动条仍然显示其默认样式。这是我所做的：

安装tailwind-scrollbar npm install --save-dev tailwind-scrollbar 更新Tailwind插件：

plugins: [
    // ...
    require('tailwind-scrollbar'),
],

我的代码（请在 ul className 中找到滚动条样式）：

function MessageTable({myMessages}) {
    return(
        <ul id="messageTable" className="relative left-[10vw] w-[60vw] h-[70vh] border-1 text-white bg-black overflow-y-scroll scrollbar-thumb-blue-600 scrollbar-thumb-rounded hover:scrollbar-thumb-red-500">
            {myMessages.map((item) => (
                <li key={item} className="table float-right clear-right max-w-[40vw] bg-blue-500 p-1 border-2 border-black rounded-2xl border-spacing-2">{item}</li>
            ))}
        </ul>           
    );
}

你知道我缺什么吗？

谢谢你的帮助！

- Aryaman Kumar

Answer 1

我认为你还应该添加“scrollbar”类。

<div class="scrollbar scrollbar-thumb-blue-600 scrollbar-thumb-rounded">...</div>

- aimakov

---

兄弟，你的评论是整个互联网上唯一真正有帮助的一个。 - aetrnm

Answer 2

请确保在您项目的 global.css 中添加 tailwind css 的导入。

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

https://tailwindcss.com/docs/installation

同时也加入这个

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

- Abdelaziz El-emary

---

谢谢信息！Tailwind CSS 对我来说完美无缺。只是滚动条样式有问题。你知道可能是什么原因吗？ - Aryaman Kumar