直接写 grid-cols-[1fr_200px_auto] 不生效，主因是 Tailwind 默认不扫描方括号内任意值，须启用 JIT 模式并配置 content 白名单；否则该类不会被编译进 CSS，dev 环境可能正常而 build 后失效。
为什么直接写 grid-cols-[1fr_200px_auto] 有时不生效
不是语法写错了，而是 Tailwind 默认不扫描方括号内的任意值——它只编译预设类（如 grid-cols-1 到 grid-cols-12）。没启用 JIT 模式或没配置 content 安全白名单时，grid-cols-[1fr_200px_auto] 这类写法会被忽略，最终生成的 CSS 里压根没有这条规则。
常见错误现象：代码写了，浏览器开发者工具里查不到对应的 grid-template-columns 声明；或者只在 dev 环境生效，build 后消失。
- 必须开启 JIT 引擎（Tailwind v3.0+ 默认启用，但旧项目可能关着）
-
tailwind.config.js中content字段要包含所有含方括号类名的文件路径，例如：content: ["./src/**/*.{js,ts,jsx,tsx}"] - 若用 Vite / Next.js 等框架，确认其插件未覆盖 Tailwind 的 content 配置
如何在 tailwind.config.js 中安全添加自定义列数
硬编码进 theme.extend.gridTemplateColumns 是最稳定的方式，不依赖 JIT 扫描，也不怕构建遗漏。适合复用频繁、结构固定的网格，比如后台表格的固定列宽组合。
示例：为仪表盘定义一个「侧边栏 + 主内容」双栏布局：
立即学习“前端免费学习笔记（深入）”；
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'sidebar-main': '240px minmax(0, 1fr))',
'header-nav-content': 'minmax(0, 1fr) 200px 1fr',
}
}
}
}
之后就能直接用 grid-cols-sidebar-main 类，无需担心扫描问题。
- 键名（如
sidebar-main）会转成 CSS 类名前缀，不能含空格或特殊符号 - 值必须是合法的
grid-template-columns字符串，支持fr、px、%、auto、minmax()等原生语法 - 别漏掉
minmax(0, 1fr)—— 它防止单元格内容撑爆容器，在响应式中比纯1fr更健壮
grid-cols-* 和自定义 grid-cols-[...] 的性能与维护差异
预设的 grid-cols-2 ~ grid-cols-12 编译后体积极小，且被大量缓存；而每次新增一个方括号写法，JIT 都要动态生成并注入新规则——高频使用时 CSS 文件会明显变大。
更隐蔽的问题是维护成本：散落在 JSX/TSX 里的 grid-cols-[...] 很难全局搜索替换，一旦设计改版（比如把 200px 侧边栏改成 256px），就得手动翻几十个文件。
- 团队协作项目，优先走
theme.extend.gridTemplateColumns配置，把布局逻辑收口到一处 - 临时调试或原型阶段，用
grid-cols-[...]快速验证没问题，但上线前应归并 - 避免混合使用：比如同时存在
grid-cols-[1fr_2fr]和grid-cols-2，语义混乱且难以推断行为
行轨道（grid-rows-*）也要同步自定义吗
要。Tailwind 默认只生成列轨道，grid-rows-* 类同样受限于 JIT 扫描和预设范围。如果你的布局需要精确控制行高（比如表头固定 64px、内容区自适应、底部工具栏 48px），只定义列宽是不够的。
跨行（row-span-2）在无显式行轨道时行为不可靠：它会退化为 grid-row: span 2，实际跨度取决于子项内容高度，而非你预期的“占满两行轨道”。
- 在
tailwind.config.js中同步扩展gridTemplateRows： gridTemplateRows: { 'header-content-footer': '64px minmax(0, 1fr) 48px' }- 然后配合使用
grid-rows-header-content-footer和row-span-full，才能确保跨行真正占满指定轨道
