TailwindCSS Nesting not including media queries

Question

I'm using tailwind CSS and would like to nest the entire tailwind CSS base/components/utilities code in a nested CSS class so that the code will be applied when used in children of the HTML elements inside that class

I know it's possible to use a prefix system instead, but I don't want to have to modify all html class attributes, so it's not an option for me.

main.css

.webapp {
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
}

I'm using the configuration from the official documentation https://tailwindcss.com/docs/using-with-preprocessors#nesting

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.js

module.exports = {
  content: [
    "../default/pages/*.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

cmd

tailwindcss --postcss -i  ./main.scss -o ./output.css --watch

The problem is that, in output.css, the nesting of the node responsive css class is handled properly but not the media queries

output.css sample

.webapp button,
.webapp input,
.webapp optgroup,
.webapp select,
.webapp textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: inherit;
    /* 1 */
    color: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 3 */
  }

@media (min-width: 1024px) {
  .lg\:static {
    position: static;
  }

  .lg\:bottom-0 {
    bottom: 0px;
  }
}

The nesting of .webapp class is only working outside the @media. It's the same for .hover/ and .focus/ . I would need it to include everything to make it work.

Thanks for your help !