Tailwind CSS sm:flex类不生效，vue-cli-plugin-tailwind环境下如何解决

• display核心插件被禁用：tailwind.config.js中的corePlugins配置项如果手动禁用了display插件，所有和display属性相关的工具类（包括flex、sm:flex等）都不会被生成；而sm:visible对应的visibility核心插件未被禁用，所以可以正常生效。
• 主题配置错误覆盖了display默认值：如果在tailwind.config.js中直接修改theme.display而非在theme.extend.display下扩展，会覆盖Tailwind默认的display属性枚举值，一旦没有手动加入flex就会导致相关类缺失。
• 编辑器智能提示异常：Tailwind CSS IntelliSense插件读取项目配置失败，常见原因是配置文件存在语法错误、插件未识别到当前项目的Tailwind配置。

• 核查核心插件配置：打开项目根目录下的tailwind.config.js，确认corePlugins字段没有禁用display插件：

// 错误示例（会禁用display相关所有工具类）
// corePlugins: {
//   display: false
// }

// 按需启用插件的正确写法，需将display加入启用列表
corePlugins: ['display', 'visibility', ...其余需要的核心插件]

• 修正主题配置：如果需要自定义display属性值，必须在theme.extend字段下扩展，不要直接覆盖根级theme.display：

module.exports = {
  theme: {
    extend: {
      // 正确：在默认配置基础上新增自定义display值
      display: {
        'my-custom': 'inline-block'
      }
    },
    // 错误：直接覆盖会丢失所有默认display类，包括flex、block等
    // display: {
    //   'my-custom': 'inline-block'
    // }
  }
}

• 修复编辑器智能提示：
  • 确认已安装官方Tailwind CSS IntelliSense插件
  • 排查tailwind.config.js的语法错误，重启编辑器即可恢复类名提示
• 配置修改完成后，重启项目开发服务即可看到sm:flex样式正常生效。

内容的提问来源于stack exchange，提问作者Joe B