Tailwind CSS display属性响应式变体无明显原因部分失效求助

问题根因 #

你在tailwind.config.js中自定义variants配置时，直接覆盖了display属性的默认变体规则，仅保留了group-hover，导致sm/md/lg等响应式变体未被启用，对应的响应式display类不会被生成。
Tailwind 变体自定义逻辑为覆盖默认值而非合并，如果需要保留默认的响应式能力，需要手动将所需的默认变体加入配置列表。

修复方法 #

修改tailwind.config.js中的variants配置，给display属性补全响应式变体即可：

variants: {
  backgroundColor: ['disabled', 'hover'],
  padding: ['group-hover'],
  // 补全responsive（响应式）变体到display的变体列表中
  display: ['responsive', 'group-hover'],
},

后续如果给其他属性添加自定义变体，也需要同步把你需要的默认变体（比如responsive、hover等）加入对应配置列表，避免出现同类失效问题。

内容的提问来源于stack exchange，提问作者Marius Mikelsen