Unknown at rule @apply css(unknownAtRules)

[vaseala]

just a simple vue file like this:

<template>
  <div class="flex">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</template>

<style>
.item {
  @apply w-20 h-4;
}
</style>

It warning: Unknown at rule @applycss(unknownAtRules) at the position of @apply

but it does not warning if I place @apply section code to a css file.

I had followed with the document: https://tailwindcss.com/docs/guides/vue-3-vite

I do not want to see the warning line, and how to do?

[jrock2004]

Has anyone solved this? I know this is not probably a tailwind issue but I would think that someone has solved this

[adamwathan]

Trick is to use the PostCSS language extension for VS Code usually:

https://tailwindcss.com/docs/editor-support#syntax-support

[rudyhadoux]

Sorry but the PostCSS Language Support plugin (that works great with Tailwind CSS) does absolutely nothing.
The problem remains.

[mrfambo]

@adamwathan PostCSS Language extension works on .css, .pcss, .postcss extensions only!

[mrfambo]

For anyone in the future, if you are working in VSCode, you need to disable the lint rule of unknownAtRules.

RECOMMENDED FIX:

1. Create .vscode at the root of your project
2. Create file named settings.json
3. Identify the filetype you are using for example css or scss
4. Create an empty json object {}
5. Inside json object add, "[FILE EXTENSION OF STEP 3].lint.unknownAtRules": "ignore"

here is how the file will look like in the case of scss extension:

.vscode > settings.json

{
  "scss.lint.unknownAtRules": "ignore"
}

It helps you push the change in git and share the fix with the team.

SECOND WAY:

1. Do the same as explained above inside your VSCode Global settings.json. It will fix the problem for you but not for others using the same codebase. You can open the file by using, Cmd+Shift+P and then choosing "Preferences: Open Settings (JSON)".

Usually, it fixes the issue right away, but you can reload browser if needed.

Fix: For vue use "css.lint.unknownAtRules": "ignore". Credits => @zijizhu

[0xyzone]

this worked for me

[JeremieBeaudoin]

Thank you!

[rigeltoth]

worked for me too!, thank you

[rudyhadoux]

Thanks. It works for my Angular scss files.

[zijizhu]

Thank you @mrfambo , this is an amazing solution.
Just to add, when using @apply inside style section of .vue SFC files (OP's case), I have to do:
"css.lint.unknownAtRules": "ignore" instead. "vue.lint.unknownAtRules" won't be picked up by vscode. I hope this helps.

[mrfambo]

I have updated my answer with your credits just for future viewers!

[front-end-performer]

I have updated my answer with your credits just for future viewers!

could you please attach reference to your solution?

[MoishyS]

we can also add custom data

example, in setting.json add
"css.customData": ["./css-data.json"]

and create a ./css-data.json file with

{
    "version": 1.1,
    "atDirectives": [
        {
            "name": "@apply",
            "description": "@apply tailwindcss classes"
        }
    ]
}

custom data can also be added by extensions, so I would hope it gets added to Tailwind CSS IntelliSense extension.

[kohnalex]

This solution has not worked for me, when facing this problem with .vue files. Have not tried on plain css or scss files though.

[MoishyS]

@kohnalex it works for me in vue files, have you restarted vscode afterwards?
also, make sure the css-data.json is at the root of your project (or change the path in settings).

[tonivj5]

it would be amazing if tailwind added this into its plugin 👍🏻

[rowild]

[yossTraore]

This worked for me beautifully. Thanks

[rowild]

@adamwathan Do you have an idea, why my comment was deleted? I can't remember having done that... Is there anywhere a history which would provide more insight?

[rowild]

@adamwathan ??

[samy1297]

Thank you the "css.lint.unknownAtRules": "ignore" in settings.json works perfectly! thank you.

[claranceliberi]

For Vue

Keep in mind the type of lang you have used

i.e

<style lang="scss">
  .actions {
      a{
        @apply underline pr-2;
      }
  }
</style>

As you can see above we have lang="scss" so the config must look like "scss.lint.unknownAtRules": "ignore"
on other side if you are using lang="css" the config must look like "css.lint.unknownAtRules": "ignore"

Note: if changes doesn't take effect immediately reload vs-code

[Scouterdev]

fix, add lang in style, working me too.
<style lang="postcss"> .classname { @apply } </style>

[kuurdiii]

+1 this one worked.

"css.lint.unknownAtRules": "ignore" did not work for me.

[k33n8nc]

Nice! this works and seems easier too :)

[AliN11]

The accepted solution didn't work for me in Nuxt 2.

[Mert75]

have you tried specifying the lang attribute?

<style lang="css" scoped>

[AliN11]

have you tried specifying the lang attribute?

<style lang="css" scoped>

Yes, didn't work:

[rowild]

use lang="postcss"

[souravbaaz]

• install 'PostCSS LAnguage Support' extension
• In your workdir .vscode>settings.json add the following

"files.associations": {
    "*.css": "postcss"
  },