Tailwind CSS自定义gridTemplateColumns配置不生效如何解决

Tailwind 对gridTemplateColumns的自定义配置，生成的工具类固定使用grid-cols-前缀，不会直接将配置的key作为独立类名输出。你配置中key为gridCol，实际生成的可用类名是grid-cols-gridCol，页面中直接写gridCol无法匹配到Tailwind生成的样式规则，因此配置不生效。

二选一即可：

• 方法1：直接修改页面类名适配Tailwind命名规则，将className里的gridCol替换为grid-cols-gridCol，修改后代码如下：

<div className='grid grid-rows-2 grid-cols-gridCol gap-y-6'>
  <WeatherHighlightCards title='Sun'/>
  <WeatherHighlightCards title='Sun'/>
  <WeatherHighlightCards title='Sun'/>
  <WeatherHighlightCards title='Sun'/>
  <WeatherHighlightCards title='Sun'/>
  <WeatherHighlightCards title='Sun'/>
</div>

• 方法2：调整配置里的key为更符合使用习惯的命名，比如将key改为auto-fit，配置修改如下：

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    screens: {
      'xs':'250px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
    },
    extend: {
      gridTemplateColumns: {
        'auto-fit': 'repeat(auto-fit, minmax(50px, 1fr))'
      }
    },
  },
  plugins: [],
}

对应页面类名替换为grid-cols-auto-fit即可使用。

如果改完仍不生效，逐一检查：

• 修改tailwind配置文件后必须重启本地开发服务，配置改动不会热更新，重启后Tailwind才会重新生成包含自定义规则的样式文件
• 确认使用自定义类的组件/页面文件路径，在配置的content扫描路径范围内，未被扫描到的文件里的类名不会被Tailwind识别生成样式

内容的提问来源于stack exchange，提问作者H.b