Tailwindcss-module: 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?
webcoderkz
All 9 comments
Can you try to upgrade to Tailwind 2?
Atinux
on 15 Feb 2021
Even on 2.15 it's not Tailwind 2 by default?
webcoderkz
on 19 Feb 2021
Not yet.
Atinux
on 26 Feb 2021
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?
webcoderkz
on 28 Feb 2021
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.
luismarquesfreire
on 16 Mar 2021
As a workaround, it's possible to bypass this error from stylelint
- in the file
stylelint.config.js, add the rule:
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['extends', 'tailwind', 'screen'],
},
],
},
- restart the nuxt dev server
mickaelchanrion
on 25 Mar 2021
@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.
webcoderkz
on 25 Mar 2021
Please create a reproduction on CodeSandBox by forking https://codesandbox.io/s/nuxt-tailwindcss-o4vn5pvp7q?from-embed
Atinux
on 25 Mar 2021
builds are failing: https://codesandbox.io/s/pedantic-heisenberg-zommu?file=/pages/index.vue
webcoderkz
on 25 Mar 2021
Related issues
sbkl
·
4Comments
Yee1014
·
5Comments
michaelpumo
·
3Comments
brandondeweese
·
3Comments
foxted
·
8Comments
Most helpful comment
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.