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

[avxkim]

"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?

[atinux]

Can you try to upgrade to Tailwind 2?

https://tailwindcss.nuxtjs.org/setup#tailwind-2

[avxkim]

Even on 2.15 it's not Tailwind 2 by default?

[atinux]

Not yet.

[avxkim]

Just followed this: https://tailwindcss.nuxtjs.org/setup#tailwind-2

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Still have this issue: Unexpected unknown at-rule "@screen"

Is this a bug?

[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'],
     },
   ],
   },

2. restart the nuxt dev server

[avxkim]

@Atinux can you look at this? It seems like this module works only with @apply directive, other won't work, i think it's an important issue.

[atinux]

Please create a reproduction on CodeSandBox by forking https://codesandbox.io/s/nuxt-tailwindcss-o4vn5pvp7q?from-embed

[avxkim]

builds are failing: https://codesandbox.io/s/pedantic-heisenberg-zommu?file=/pages/index.vue

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sovetski]

The issue still there for me with tailwind 3.3.0

[rdourado]

I am still experiencing the same issue.

[ineshbose]

Hi, sorry - I believe this to be a postcss thing that Tailwind. I'm not aware of a @screen rule available in the latest version of Tailwind - where does this come from? I do see this - https://tailwindcss.com/docs/functions-and-directives#screen

Please feel free to correct me if I'm wrong.

[sovetski]

Hi, sorry - I believe this to be a postcss thing that Tailwind. I'm not aware of a @screen rule available in the latest version of Tailwind - where does this come from? I do see this - https://tailwindcss.com/docs/functions-and-directives#screen

Please feel free to correct me if I'm wrong.

Oh yes very strange, I found this documentation but is it from v0 😄 https://tailwindcss-v0.netlify.app/docs/functions-and-directives/#screen

[mirobo]

@sovetski It's here to stay.. https://github.com/tailwindlabs/tailwindcss/discussions/7516 This also had impact on the new application builder in Angular 17 https://github.com/angular/angular-cli/issues/26709 😁