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]

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.. tailwindlabs/tailwindcss#7516
This also had impact on the new application builder in Angular 17 angular/angular-cli#26709 😁