React中Tailwind CSS部分Div颜色样式不生效问题及解决

问题现象 #

登录页与首页使用相同的Tailwind自定义颜色配置，但登录页的颜色样式无法正常生效：登录容器本该显示自定义深色背景，却呈现白色；而首页中使用相同颜色类的元素渲染完全正常。

相关代码 #

Login.jsx（异常页面） #

<div className="App">
    <div className="flex items-center justify-center min-h-screen">
        <div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg shadow-2xl bg-egloback1">
            <h3 className="text-2xl text-white font-bold text-center">Login</h3>
            {Status === false && (
                <p className="text-center text-red-900 mt-3">{data.error}</p>
            )}
            <div className="mt-4">
                <div>
                    <input type="email" placeholder="Email"
                        className="w-full px-4 py-2 mt-2 focus:outline-0 caret-white text-white bg-egloinput1 border border-transparent rounded-md focus:outline-none focus:ring-1 focus:ring-[#9441f2] duration-300" onChange={event => setEmail(event.target.value)} value={Email} />
                </div>
                <div className="mt-4">
                    <input type="password" placeholder="Password"
                        className="w-full px-4 py-2 mt-2 focus:outline-0 caret-white text-white bg-egloinput1 border border-transparent rounded-md focus:outline-none focus:ring-1 focus:ring-[#9441f2] duration-300" onChange={event => setPassword(event.target.value)} value={Password} />
                </div>
                <div className="flex items-baseline justify-between">
                    <button className="px-6 py-2 mt-4 text-white bg-eglobutton1 rounded-lg hover:bg-eglobutton2 duration-300" onClick={Login}>Login</button>
                    <a href="/reset" className="text-sm text-blue-600 hover:underline">Forgot password?</a>
                </div>
            </div>
        </div>
    </div>
</div>

Home.jsx（正常页面） #

<LoadingOverlay active={isActive} fadeSpeed={400} spinner styles={{
        spinner: (base) => ({ ...base, width: '30px', '& svg circle': { stroke: 'rgba(255,255,255,255)' } }),
        overlay: (base) => ({ ...base, background: 'rgba(17,17,17,1)' }), wrapper: { width: '100%', height: '100%' }
    }}>
    <div className="App">
        <Sidebar />
        <p className="select-none text-center mt-16 text-4xl underline decoration-1 underline-offset-8">Welcome, {data.name}</p>
        <p className="animate-pulse select-none font-mono text-center mt-3 text-sm">You have {data.notification_count} notifications</p>
        <div className="flex justify-center items-center h-[200px] mt-[80px]">
            <div className="rounded-lg bg-egloback1 w-48 h-[120px] m-[5px]">
                <p className="text-center mt-[49px]">No favourite 1</p>
            </div>
            <div className="rounded-lg bg-egloback1 w-48 h-[120px] m-[5px]">
                <p className="text-center mt-[49px]">No favourite 2</p>
            </div>
        </div>
        <div className="flex justify-center items-center mt-[-70px] h-[200px]">
            <div className="rounded-lg bg-egloback1 w-[395px] h-[120px] m-[5px]">
                <p className="text-center mt-1">Announcements:</p>
            </div>
        </div>
    </div>
</LoadingOverlay>

tailwind.config.cjs #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        egloback1: '#1e1e1e',
        eglobutton1: '#9441f2',
        eglobutton2: '#761fdb',
        egloinput1: '#303030'
      },
    },
  },
  plugins: [],
}

App.css #

@tailwind base;
@tailwind components;

html {
    padding: 0px;
    margin: 0px;
    background-color: #111111;
    -webkit-backface-visibility: hidden;
}

p, s, i, b {
    color: white;
}

body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@tailwind utilities;

已尝试的无效方案 #

• 直接使用颜色代码替代自定义颜色类
• 重启开发服务器
• 调整CSS文件的导入顺序
• 修改配置中的颜色名称后，颜色会短暂生效几分钟，随后恢复为白色

解决方案 #

经排查为TailwindCSS渲染问题，通过调整布局类作为临时解决办法：

原代码片段：

<div className="flex items-center justify-center min-h-screen">
<div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg shadow-2xl bg-egloback1">

替换为：

<div className="flex flex-row min-h-screen justify-center items-center">
<div className="rounded-lg bg-egloback1 w-[290px] h-full p-7 m-[5px]">

两种写法均可实现容器居中，修改后自定义颜色样式未再出现失效问题。

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