React+Tailwind CSS应用无法占满屏幕宽度的问题求助

问题原因分析 #

1. App组件的<main>元素未设置全屏宽度，仅以内容宽度显示，导致内部组件无法继承全屏宽度。
2. Tailwind CSS导入不完整，部分宽度样式未正确生效。
3. 根容器#root默认宽度为内容宽度，无法继承body的全屏设置。

修复步骤 #

1. 给App组件的main添加全屏宽度类

修改App组件代码，为<main>添加w-full类：

function App() {
  return (
    <main className="flex w-full h-screen justify-center items-center bg-gray-100">
      <ProfileSection
        profilePicUrl={pp}
        currentFollowers={137}
        goalFollowers={200}
      />
    </main>
  );
}

export default App;

2. 修正Tailwind CSS的导入方式

在index.css中替换原导入语句，确保完整加载Tailwind的基础、组件和工具类：

/* 替换原有的 @import "tailwindcss" */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

3. 确保根容器占满屏幕宽度

在index.css中添加以下样式，让#root元素占满全屏宽度：

#root {
  width: 100%;
}

验证效果 #

修改完成后，<ProfileSection>的黑色背景区域会占满屏幕宽度，内部内容保持水平居中，进度条也会适配全屏宽度显示。

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