Tailwind CSS 不应用 display: flex on sm:flex

【问题标题】：Tailwind CSS not applying display: flex on sm:flexTailwind CSS 不应用 display: flex on sm:flex
【发布时间】：2021-12-05 02:36:06
【问题描述】：

我有一个包含以下类的 div

 <div class="hidden sm:visible sm:flex">
  ....
</div>

sm:visible 被应用的地方

@media (min-width: 640px) .sm\:visible {  visibility: visible; }

但是display: flex 类没有被应用

作为旁注，intellisense 也没有显示它

我正在使用vue-cli-plugin-tailwind

【问题讨论】：

【解决方案1】：

所以正如@JHeth 指出的那样，我应该检查我的顺风配置，所以我的问题出在我的 tailwind.config.js 中在哪里如下

 variants: {
…
       display: ['group-hover'],
     },

而不是在“扩展”属性中，所以我没有扩展，而是覆盖

所以我改成

 variants: {
    extend: {
      …
      display: ['group-hover'],
 },
}

【讨论】：