Tailwind设置body背景色不生效问题求助

嗨，我在index.css里尝试给body设置背景色，但网站上背景色没显示出来，只有文本颜色生效了。下面是我的项目配置文件和代码，麻烦帮忙看看哪里出问题了？

我的配置与代码文件 #

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
import tailwindScrollbar from 'tailwind-scrollbar';

module.exports = {
  content: [
    "/index.html",
    "./src/**/*.{html,js, jsx}"
  ],
  theme: {
    extend: {
      fontFamily:{
        'sans': ['Inter', 'sans-serif']
      },
    },
  },
  plugins: [tailwindScrollbar],
};

index.css #

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


html{
    scroll-behavior:smooth;
}

body{
    @apply bg-amber-800 text-zinc-50;
} 

App.jsx #

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx';
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

index.html #

<!doctype html>
<html lang="en" class="scrollbar-thin scrollbar-track-zinc-800 scrollbar-thumb-zinc-500">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Seemon's Portfolio</title>
    
    <link rel="shortcut-icon" href="/Images/favicon.svg" type="image/svg+xml"> 
   

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" 
    crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0..1,0" />


  </head>
  <body>
    
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx #

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx';
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

当前网站输出效果 #

可能的解决办法（热心网友回复） #

嗨，瞅了你的代码，大概率是这几个原因导致的，给你几个排查和解决方向：

• 1. body没占满整个视口高度
  默认情况下body的高度只包裹内容，如果页面内容很少，背景色只会显示在内容区域，看起来像没生效。可以给html和body加上最小高度占满屏幕：

html{
    scroll-behavior:smooth;
    @apply min-h-screen; /* 新增 */
}

body{
    @apply bg-amber-800 text-zinc-50 min-h-screen; /* 新增min-h-screen */
} 

• 2. 根组件/容器覆盖了body背景色
  检查下App.jsx里最外层的组件，是不是加了类似bg-white的背景色类？如果有的话，把它改成bg-transparent或者直接去掉，这样body的背景色就能透出来了。

• 3. 样式被优先级更高的规则覆盖
  打开浏览器开发者工具，选中body元素看看bg-amber-800是不是被划掉了（说明被其他样式覆盖）。如果是，要么调整自定义样式的位置（确保在Tailwind指令之后），要么给body的背景色加!important临时测试（不推荐长期用，但可以快速验证）：

body{
    @apply bg-amber-800 !important text-zinc-50;
} 

• 4. 清除缓存重启开发服务
  有时候缓存会导致样式不更新，试试重启你的React开发服务器，或者手动清理项目的缓存文件再重新构建。

备注：内容来源于stack exchange，提问作者Seemon Bhadoria