tailwind v3.4 并未新增 grid 功能，仅放宽任意值解析限制，使 grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] 等写法生效，需满足 content 配置匹配、空格转义为下划线、不嵌套引号三个条件。
Tailwind v3.4 并没有「新增 Grid 功能」，它只是放宽了对任意值（arbitrary values）的解析限制，让原本就支持但被默认拦截的 grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] 这类写法真正生效——前提是你的 content 配置已正确启用，并且空格被转义为下划线。
为什么以前写 grid-cols-[repeat(2,_1fr)] 会失效
旧版本（v3.3 及更早）默认禁用带括号和函数调用的任意值语法，哪怕加了方括号。Tailwind 认为 repeat()、minmax() 等属于“高风险 CSS 值”，为防注入或构建爆炸，默认跳过解析。
- 配置未开启时，
grid-cols-[repeat(2,_1fr)]直接被忽略，不生成任何 CSS 规则 - 即使你手动在
tailwind.config.js的theme.extend.gridTemplateColumns里加了映射，也仅对命名键生效，不覆盖任意值通配逻辑 - v3.4 把这个开关从「默认关」变成「只要 content 配置存在且匹配，就允许解析」
grid-cols-[...] 在 v3.4 中必须满足的三个条件
不是写了方括号就能用，漏掉任一条件都会静默失败：
-
content数组必须包含当前文件路径，例如["./src/**/*.{html,js,ts,jsx,tsx}"]；只写["./src/**/*"]不够，Tailwind 不识别无扩展名的通配 - 方括号内所有空格必须用下划线
_替代，比如minmax(250px,_1fr)，不能写成minmax(250px, 1fr) - 不能嵌套引号或使用双引号包裹整个值，
grid-cols-["repeat(2,_1fr)"]是非法的，grid-cols-[repeat(2,_1fr)]才合法
v3.4 没有新增 grid-areas-* 或 grid-flow-* 类
很多人误以为 v3.4 加了新类名，其实 grid-areas-[header_nav_main]、grid-flow-dense 这些在 v3.0 就已存在，只是文档没强调用法。v3.4 的变化纯属底层解析器松动，不是 API 扩展。
-
grid-flow-row/grid-flow-col仍是原生grid-auto-flow的映射，没新增值 -
grid-areas-*依然只接受下划线分隔的标识符，不支持空格或连字符，grid-areas-[sidebar_content]可以，grid-areas-[side-bar_content]会失败 - 想用
fit-content()或max-content？写法一样：grid-cols-[fit-content(200px)]，但得确保它出现在content扫描到的文件里，否则照样不生成
真正容易被忽略的是：v3.4 的「松动」只作用于任意值语法，不改变类名语义、不新增响应式前缀、也不修复 Safari 对 grid-template-areas 的旧 bug。如果你的 grid-areas-[a_b_c] 在 v3.3 能用，v3.4 不会变更好；如果它本来就不生效，升级也不会自动修好——问题大概率出在 content 配置或空格转义上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
