Unable to add XS in Tailwind's @screen

On my next js application trying to add the xs screen type on tailwindcss.

tailwind.config.js:

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens:{
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl':  '1280px',
    },
    extend: {
      boxShadow: {
        view: '0.125rem 0.25rem 0.1875rem rgb(0 0 0 / 35%)',
      },
      fontFamily: {
        open: ['Open Sans'],
        poppins: ['Poppins'],
      },
      fontSize: {
        s: ['0.75rem'],
        m: ['0.9375rem'],
      },
      spacing: {
        30: '1.875rem',
        15: '0.9375rem',
        25: '1.5625rem',
      },
      colors: {
        base: '#97b63f',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

 module.exports = {
             plugins: {
               tailwindcss: { config: "./config/tailwind.config.js" },
               autoprefixer: {},
             },
           }

For the below added into my component scss file.

@screen xs{
 .my-class{
   @aaply hidden;
 }
}

Getting the below error: Syntax error: No xs screen found