Responsive breakpoint works in Playground but not in next.js setup

[shahidcodes]

Hi,
I've recently started using tailwind. Absolutely loving it. I am facing a weird issue which I think due to I am missing some configuration.
The below responsive breakpoint works in playground

<div class="hidden sm:flex flex-row">
  <div class="h-24 w-24 bg-red-200">1</div>
  <div class="h-24 w-24 bg-red-200">2</div>
  <div class="h-24 w-24 bg-red-200">3</div>
</div>

but when I use the same in my next.js app the the div never shows

<div className="hidden sm:flex flex-row">
  <div className="h-24 w-24 bg-red-200">1</div>
  <div className="h-24 w-24 bg-red-200">2</div>
  <div className="h-24 w-24 bg-red-200">3</div>
</div>

my tailwind.config.js

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        heroImage:
          "url('http://cdn.home-designing.com/wp-content/uploads/2019/10/grey-modern-sofa-1.jpg');",
      }),
    },
  },
  variants: {
    extend: {
      backgroundColor: ['checked'],
      borderColor: ['checked'],
    },
    display: ['group-hover'],
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

my devDependencies

  "devDependencies": {
    "@types/cookies": "^0.7.6",
    "@types/node": "^14.14.35",
    "@types/node-fetch": "^2.5.8",
    "@types/react": "^17.0.3",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.8",
    "tailwindcss": "^2.1.0",
    "typescript": "^4.2.3"
  }