使用Tailwind CSS无法自定义滚动条样式问题排查

你的滚动条样式不生效主要是因为遗漏了基础滚动条类的配置，同时还有几个需要检查的关键点：

1. 添加基础滚动条类 #

tailwind-scrollbar 插件需要先通过基础类（比如scrollbar或scrollbar-thin）来初始化滚动条的样式注入，否则你添加的scrollbar-thumb-*这类自定义类不会生效。

修改你的ul元素的className，添加scrollbar类：

<ul id="messageTable" className="relative left-[10vw] w-[60vw] h-[70vh] border text-white bg-black overflow-y-scroll scrollbar scrollbar-thumb-blue-600 scrollbar-thumb-rounded hover:scrollbar-thumb-red-500">

如果想要更细的滚动条，可以用scrollbar-thin替代scrollbar。

2. 确认Tailwind配置的内容扫描范围 #

确保你的tailwind.config.js里的content数组包含了当前组件所在的路径，否则Tailwind会因为无法扫描到这些自定义滚动条类而把它们从生产构建中移除：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}', // 确保包含你的MessageTable组件路径
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwind-scrollbar'),
  ],
}

3. 检查插件版本兼容性 #

确保你安装的tailwind-scrollbar版本和Tailwind CSS v3兼容，如果是旧版本可能存在适配问题，执行更新命令：

npm update tailwind-scrollbar --save-dev

额外提示 #

你代码里的border-1不是有效的Tailwind类，Tailwind的边框宽度类是border（默认1px）、border-0到border-9，或者用border-[1px]来自定义宽度，这个错误不影响滚动条样式，但建议修正以确保边框样式生效。

修改后的完整组件代码：

function MessageTable({myMessages}) {
    return(
        <ul id="messageTable" className="relative left-[10vw] w-[60vw] h-[70vh] border text-white bg-black overflow-y-scroll scrollbar 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>           
    );
}

内容的提问来源于stack exchange，提问作者Aryaman Kumar