Unexpected unknown at-rule "@screen" at-rule-no-unknown

"nuxt": "^2.14.12",
"@nuxtjs/tailwindcss": "^3.4.2",

Node v14

Whenever i try to use any tailwind directive except @apply it throws me an error: “Unexpected unknown at-rule “@screen” at-rule-no-unknown”, nor screen, nor layer works.

Example code:

<style lang="postcss" scoped>
.navbar {
  @apply relative mx-auto px-4 flex items-center h-full;
  @screen lg {
    @apply py-6;
  }
}
</style>

tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        body: '#edf0f1',
      },
    },
  },
}

@Atinux might be related to npm?

[luismarquesfreire]

This is also not working on the latest version 4.0.1 with tailwind 2. I can only use @screen on root css (tailwind.css), if I try using it inside a component, it gives me this specific error.

[mickaelchanrion]

As a workaround, it’s possible to bypass this error from stylelint

1. in the file stylelint.config.js, add the rule:

  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['extends', 'tailwind', 'screen'],
      },
    ],
  },

1. restart the nuxt dev server