React中TailwindCSS动态网格类失效及任意值用法问题

一、动态插值类名失效的原因 #

Tailwind CSS的JIT（即时编译）模式需要在编译阶段明确识别出完整的类名才能生成对应的样式。你用字符串插值grid-rows-${r}``grid-cols-${c}时，编译工具看到的是不完整的类名模板，无法提前解析出最终的grid-rows-4或grid-cols-3，因此不会生成这些类的CSS规则。

此时页面中仅生效grid和grid-flow-dense样式，浏览器会采用网格布局的默认值：grid-template-rows: auto（每个子元素自动占一行）、grid-template-columns: 1fr（仅一列），所以12个子元素会渲染成12行1列的网格。而字符串字面量是固定的完整类名，编译时能被Tailwind正确识别，自然生成4×3的网格样式。

二、grid-rows/grid-cols的动态任意值用法 #

Tailwind支持类似w-[17rem]的任意值语法，对grid-rows和grid-cols同样适用，格式为：

• 行数：grid-rows-[数值]
• 列数：grid-cols-[数值]

比如你需要42行的网格，直接写grid-rows-[42]即可，Tailwind会生成grid-template-rows: repeat(42, minmax(0, 1fr))的样式；动态场景下可以用模板字符串插值：

<div className={`grid grid-flow-dense grid-rows-[${r}] grid-cols-[${c}]`}></div>

只要r和c是合法的数字（或CSS网格轨道值），JIT模式就能编译出对应的样式。

另外注意：你的tailwind.config.js中同时配置了purge和content，在Tailwind v3+版本中purge已被content取代，建议删除purge配置项，只保留content即可，避免冲突。

内容的提问来源于stack exchange，提问作者Felix Heox