Next.js中Tailwind Grid类失效问题求助

架构老林

2026-7-4

解决Tailwind Grid在Next.js中不生效的问题

你的情况是Grid布局类完全没效果，但其他Tailwind样式正常，核心原因大概率是Tailwind的按需编译没包含你的组件，或者布局细节有冲突，按下面步骤排查：

检查Tailwind配置的内容范围
打开项目根目录的tailwind.config.js，确认content数组里包含了你的Media组件所在的文件路径。比如组件在app/Media.jsx，配置要写成这样：
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    // 或者精准指定路径
    "./app/Media.jsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
Tailwind只会编译content列表里文件实际用到的样式类，要是你的组件不在这个范围内，grid、grid-cols-3这类Grid相关类不会被生成，自然没效果；而mt-10、flex这类常用类可能在其他组件里用过，所以能正常生效。
调整子元素与图片的布局设置
去掉子元素的inline-block类（Grid子元素不需要这个），同时修改Next.js Image组件的属性，让图片适配Grid单元格：
```
<div key={index} className="relative">
  <Image
    className="object-cover w-full h-full"
    src={photo}
    alt={`photo-${index}`}
    fill
  />
</div>
```
用fill替代固定的width和height，配合父容器的relative，图片会自动填充整个Grid单元格，避免固定尺寸导致的布局错位。
重启开发服务器
修改Tailwind配置后，需要重启Next.js的开发服务器，新的配置才会生效。