Next.js + Tailwind样式问题：滚动时导航栏颜色无法正常切换

这不是Tailwind的问题，你的代码存在几个关键疏漏：

• 未绑定滚动事件：你仅在useEffect里定义了colorChange函数，但没有将其添加到window的scroll事件监听中，导致颜色切换逻辑根本不会触发。
• 缺少事件清理逻辑：useEffect没有返回清理函数，组件卸载后会残留事件监听，引发内存泄漏。
• 逻辑不完整：仅处理了滚动到90px以上的情况，未定义滚动回90px以下时的颜色恢复逻辑；如果color的初始值就是#ffffff，自然看不到颜色变化。

修复后的代码示例 #

useEffect(() => {
    const colorChange = () => {
        // 根据滚动位置切换颜色
        if (window.scrollY >= 90) {
            setColor('#ffffff'); // 滚动到指定位置后设为白色
        } else {
            setColor('#你的初始颜色值'); // 滚动回去时恢复原颜色
        }
    };

    // 添加滚动事件监听
    window.addEventListener('scroll', colorChange);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
        window.removeEventListener('scroll', colorChange);
    };
}, []); // 空依赖数组确保逻辑仅在组件挂载时执行一次

结合Tailwind的优化方案（更符合Tailwind使用习惯） #

如果用Tailwind，建议通过状态切换类名而非直接设置颜色值，这样能更好利用Tailwind的样式系统：

import { useState, useEffect } from 'react';

// 用状态标记是否滚动到指定位置
const [isScrolled, setIsScrolled] = useState(false);

useEffect(() => {
    const handleScroll = () => {
        setIsScrolled(window.scrollY >= 90);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
}, []);

在导航栏元素中使用动态类名：

<nav className={`${isScrolled ? 'bg-white' : 'bg-transparent'} transition-colors duration-300`}>
  {/* 导航内容 */}
</nav>

内容的提问来源于stack exchange，提问作者Emil-André Nordheim