Tailwind nested declaration error with Nuxt application

I am using Tailwind within a Nuxt application. I am trying to have some nested classes (using BEM syntaxe).

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

.class1{
@apply someTailwindClasses
}
    
.class2{
@apply someTailwindClasses
}

.class3{
@apply someTailwindClasses
}

.class4 {
        @apply someTailwindClasses

    &__element1 {
        @apply someTailwindClasses
    }
}

I have this configuration in my nuxt.config.js file

const path = require('path')

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'myTitle',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~assets/css/tailwind.scss',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    postcss: {
      plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        'postcss-nested': {},
        tailwindcss: path.resolve(__dirname, './tailwind.config.js')
      }
    },
    preset: {
      stage: 1 // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-featuress
    }
  }
}

My package.json files has those dependencies

"dependencies": {
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "postcss-nesting": "^8.0.1"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^4.2.1",
    "autoprefixer": "^10.3.4",
    "node-sass": "^6.0.1",
    "postcss": "^8.3.6",
    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.6",
    "sass-loader": "^10.1.1",
    "tailwindcss": "^2.2.15"
  }

I have this error about a declaration in the middle of a long list of declarations assets/css/tailwind.scss:85:1, not even from the beginning (as if it was complaining about .class3). If I remove the nested declaration (.class4) then it's fine. The nesting is the problem.

Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js): Error: No parent could be found at /home/my-name/Code/project-folder/assets/css/tailwind.scss:85:1 at findParent (/home/my-name/Code/project-folder/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:262:9) at.....

If anyone knows, please help.