Next.js中Tailwind CSS Grid布局异常问题求助

1. 修复组件导入路径错误 #

父组件中WebsiteFeatures的导入路径指向了public目录，这是错误的——public用于存放静态资源（如图片、字体），组件文件应放在src/components或src/pages这类源码目录下。修正导入路径：

// 假设WebsiteFeatures在src/components目录下
import WebsiteFeatures from "@/components/WebsiteFeatures";

2. 解除父容器高度限制的影响 #

父容器AboutPage使用了h-screen，会让容器高度固定为视口高度。如果Navbar+AboutTitle的高度已占满视口，WebsiteFeatures会被挤压或溢出，导致Grid布局显示异常。可以：

• 替换h-screen为min-h-screen，确保容器至少占满视口，同时允许内容超出：

  <div className={"bg-background-grey min-h-screen w-full"} id={"about"}>
  

• 给WebsiteFeatures添加上间距，避免被上方组件遮挡：

  <WebsiteFeatures className="mt-8" />
  

3. 验证Tailwind CSS的Content覆盖范围 #

确保WebsiteFeatures组件的文件路径在tailwind.config.js的content数组覆盖范围内。如果组件在src/components下，当前配置没问题；若在其他目录，需补充对应路径：

content: [
  "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  // 添加组件所在的其他路径
],

4. 确保Grid容器的宽度生效 #

给Grid容器显式添加w-full，避免因继承宽度不足导致布局失效：

<div className={"grid grid-cols-4 w-full"}>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
</div>

5. 排查样式冲突 #

用浏览器开发者工具检查Grid容器的实际样式，确认是否有其他CSS规则覆盖了Tailwind的grid或grid-cols-4属性（比如父元素设置了display: flex）。

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