使用Tailwind时bg-amber-800背景属性未生效问题求助

问题原因 #

1. h-full是相对父元素高度生效的，但默认html、body以及React挂载的根容器（如#root）都没有设置100%高度，导致根div的高度无法撑满视口。
2. Navbar使用了absolute定位，脱离文档流，根div内部没有正常流元素支撑高度，进一步导致根div高度塌陷为0，背景色无法显示。

解决方案 #

方案一：直接使用h-screen替代h-full #

h-screen是Tailwind提供的基于视口高度的类，不需要依赖父元素高度，直接让根div撑满整个视口：

修改后的App.jsx：

import React from "react";
import Navbar from "./Components/Navbar"

function App() {
  return (
    <div className="w-full h-screen bg-amber-800">
      <Navbar/>
    </div>
  );
}

export default App;

方案二：给父链元素设置全高 #

如果坚持使用h-full，需要在全局样式中设置html、body和根容器的高度：

在项目的全局样式文件（如index.css）中添加：

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

此时App.jsx中的h-full就能正常生效，根div会撑满父元素高度。

额外提示 #

Navbar中的tex-black-100是拼写错误，正确应为text-black-100，该错误会导致文字颜色样式失效，建议修正。

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