[Vuejs]-Tailwind CSS not applying display: flex on sm:flex

So as @JHeth pointed out I should check my tailwind config so my issue was in my tailwind.config.js
Where it was as follows

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

Instead in the ‘extend’ property so instead of extending I was overriding

So I changed it to

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