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

[NisengweThiery]

Idk why this fixed it but thanks.

[jarriagada]

16/02/2024 aun funciona😁

[yury-giraldo]

Thank you, it's working

[devuser22]

postCSS language support

awesome man

[Ragervic]

@shivee-yadav Thanks, your solution worked.

[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]

UPDATE 2023
RECOMMENDED FIX:

Here are the steps:

1. Create .vscode at the root of your project with the two files named

• settings.json
• tailwind.json

2. Update the settings.json file

{
  "css.customData": [".vscode/tailwind.json"]
}

3. Update the tailwind.json file

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}

Credits:

1. Article by Duncan Leung
2. @SeyyedKhandon

---

HISTORY

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

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.

For Nuxt users, please add:
<style lang="css"> or <style lang="scss"> based on your setup.

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)".
   (Update: on the latest VSCode click on "Preferences: Open User Settings (JSON)")
2. Add "[FILE EXTENSION OF STEP 3].lint.unknownAtRules": "ignore" in the 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

Update: unknownAtRules will get disabled. You won't get its intelisense benefits. Credits => @TrueCarry @zumoshi

[renatobritodev]

Thanks, it's working!

[jitendreyadav]

thanks for information provide

[Kemorave]

Same settings for sass files

[ishaifuddin]

i did exactly what you told me to do but not working but mine was external globals.css in next js project with tailwind

[abdoufma]

You have no idea how long I've been looking for a fix that actually works.

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?

[mrfambo]

could you please attach reference to your solution?

Here it is. #5258 (comment)

[ayowee]

Second Way worked for me.

[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.

[Rolandisimo]

@wootra answer creates a different problem in my VS Code. Note: I used "*.scss"

[wootra]

I believe tailwind is post css and scss is pre css.. I saw some answer that put postcss instead of tailwind for the setting. didnt test it yet

[TRegan3]

This solution worked. I have a React project using Typescript and have the postcss language extension installed. The "css-data.json" file needs to be in the parent folder of the .vscode folder, and you need to close and re-open VS code to have the error message disappear.

[Drol]

This is the correct solution as it requries no extensions and can be sournce controlled and shared with the whole team.

[luchillo17]

@Drol Just because it requires no extensions doesn't mean it's the correct solutions, there are no "correct" solutions in software, just better and worse solutions, I do believe the best solution so far (unless VSCode team decides Tailwind is widespread enough to include it into the base VSCode source) is this: #5258 (comment)

[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>

[bagaskarala]

but scss intelesense not working anymore

[NatoBoram]

This is the one that worked for me in Svelte

[vaseala]

But this loses syntax highlighting（I have installed the postcss plugin of vscode）：

[ishowman]

@vaseala add following to .vscode\settings.json (if not works, try to install https://marketplace.visualstudio.com/items?itemName=csstools.postcss):

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

[vaseala]

@vaseala add following to .vscode\settings.json (if not works, try to install https://marketplace.visualstudio.com/items?itemName=csstools.postcss):

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

But this will change the highlighting rules of the code in the script tag in my template。
before I add the filesAssociations,the code preview like:

after I add the filesAssociations, the code preview like:

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

[kalnode]

This seems to remove all color highlighting; everything is white. How is this a sensible thing?

[souravbaaz]

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

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

[cybertcode]

me sirvió muchas gracias.

[idanielaf]

For anyone still struggling with this same issue. Installing PostCss language support was very helpful to me. It solved the error I had

[tspattentec]

Perhaps the Tailwind Intellisense plugin should somehow declare a dependency on postcss language support.
Simply installing the postcss plugin alongside the tailwind-plugin fixes the issue.

[eric-burel]

This is probably more future proof and generic, if your postcss config uses other plugins than just Tailwind

[eric-burel]

Actually I lose formatting with this approach and can't find a setting to tell to use CSS formatter

[idleberg]

The recommended fix is unacceptable and a workaround at best. Why disable all warnings when one wants to ignore a single case?

As a Svelte user, @rowild's solution worked for me: I am now using <style lang="postcss"></style>, which apparently works for other frameworks as well.

[vaseala]

The recommended fix is unacceptable and a workaround at best. Why disable all warnings when one wants to ignore a single case?

As a Svelte user, @rowild's solution worked for me: I am now using <style lang="postcss"></style>, which apparently works for other frameworks as well.

@idleberg
I haven't done the development of vite+tailwindcss recently, and it was a problem encountered before. Then the @mrfambo 's solution did block the prompts in vscode, so I adopted it.
Maybe there is a better solution now, but I haven't tested it, and I don't dare to rashly adopt it.
If anyone else encounters this problem, try the upvoted answer. Maybe after a while I'll choose a suitable anwser after I've tested it.

[mrfambo]

@idleberg With all due respect. I have mentioned that it may stop useful warnings.

[dipbhi]

Works perfectly for Nuxt 3 as well.

[Harold-Anderson]

Works for svelte thanks!

[regchiu]

If you use VSCode, installing Tailwind CSS IntelliSense then VSCode settings:

"files.associations": {
  // "*.scss": "tailwindcss", // If you use .scss
  "*.css": "tailwindcss"
}

It is worked for me.

[Johnnnnboy]

hi, can i ask another Q, there is no warning, after i set as you like, but when i run git commit, i got this

so please!

[regchiu]

hi, can i ask another Q, there is no warning, after i set as you like, but when i run git commit, i got this

so please!

I don't know what is your husky hooks did. Could you check your husy hooks?

[Johnnnnboy]

no special

[regchiu]

no special

The problem you are encountering is different from the topic of this issue.
You can follow this solution to modify your lint rules. Hope this helps you. :)

https://stackoverflow.com/questions/72161637/unexpected-unknown-at-rule-tailwind-scss-at-rule-no-unknown

By the way, you shouldn't need to post duplicate questions under every single comment.

[Johnnnnboy]

thanks, and sorry i'll delete it immediately

[Taelkir]

Unfortunately none of these recommendations (other than disabling unkownAtRules linting entirely, which feels a bit over the top) seem to work in .vue files. Changing the lang attribute to 'postcss' removes all highlighting, and the tailwind & postcss extensions don't seem to look in .vue files for rules.

[draiz]

Still no fix for Webstorm?

[bitmonti]

"css.validate": false
restart vs-code

[RenanFrancaDev]

https://www.codeconcisely.com/posts/tailwind-css-unknown-at-rules/

[simon-marcus]

This #5258 (comment) is the right answer for me.

To fix “Unknown at rule @tailwind” warning, start by installing Tailwind CSS IntelliSense plugin.

When that is done, you need to associate your CSS file with Tailwind CSS.

1. Open the CSS file where you import Tailwind CSS

2. Press Shift + P and search for “change language mode”
   

3. Change language setting in VSCode
   Inside the search bar, type “tailwindcss” and select it.

Now your CSS file is associated with Tailwind CSS and the warnings should be gone.

[luchillo17]

Wouldn't this change it temporarily? the permanent one would be to change the file associations.
#5258 (comment)

[victor-ponamariov]

PHPStorm support?

[sovetski]

Any "official" solution?

[simon-marcus]

#5258 (reply in thread)

[Ecalose]

In 2024,I think the best solution is this: Install cpylua.language-postcss to fix it in vue,and change settings like below

"files.associations": {
  // "*.scss": "tailwindcss", // If you use .scss
  "*.css": "tailwindcss"
}

don`t forget set style lang in vue file,then the highlight and format will be ok.

[jaimeenkoffeekodes]

use vs code extension PostCSS Language Support

[xJackpotsDev]

You can go to settings and type Unknown At Rules and select ignore

[QuentiumYT]

Actually, I made an extension named Tailwind CSS directives a while ago. I could have mentioned this earlier. https://marketplace.visualstudio.com/items?itemName=QuentiumYT.vscode-tailwindcss-directives

It works with CSS / SCSS language server (not needed to switch to tailwindcss, or create extra configs

[luchillo17]

The best current solution is the Tailwind CSS IntelliSense plugin, which is official one, with the *.css file association to tailwind:

[luchillo17]

@deisner Ah this is a vue file, this fix only works for files with the proper extension, meaning *.css, and if you enable it *.scss, try adding file associations for *.vue just like you did for *.css, though not sure if that will break your vue syntax highlight...

[regchiu]

@deisner If you use vue template of vite, you can see https://tailwindcss.com/docs/guides/vite#vue.

You need to install postcss to remove warning.

[deisner]

@regchiu I do have it installed (and that's the guide I used to scaffold the demo).

[luchillo17]

@deisner Because vue mixes html, css and js in the same file, you would need a vue extension to support this, I don't know of a way to fix this in vue other than disabling the warning, or another extension like Tailwind CSS directives which I don't know if it's safe to use...

[regchiu]

@deisner Do you have try to change <style scoped> to <style scoped lang="postcss">?

[syabro]

Still no fix for Webstorm?

[quul]

Still no fix for Webstorm?

There might be a work around that change

<style>

to

<style lang="postcss">

according to this youtrack issue

[Thevetat]

For Lazyvim users, what worked for me was adding volar settings. Here is my config for disabling this rule everywhere.

return {
  "neovim/nvim-lspconfig",
  opts = {
    servers = {
      tailwindcss = {
        settings = {
          tailwindCSS = {
            lint = {
              invalidApply = false,
            },
          },
        },
      },
      cssls = {
        settings = {
          css = {
            validate = true,
            lint = {
              unknownAtRules = "ignore",
            },
          },
          scss = {
            validate = true,
            lint = {
              unknownAtRules = "ignore",
            },
          },
        },
      },
      volar = {
        settings = {
          css = {
            validate = true,
            lint = {
              unknownAtRules = "ignore",
            },
          },
          scss = {
            validate = true,
            lint = {
              unknownAtRules = "ignore",
            },
          },
        },
      },
    },
  },
}

[nijinekoyo]

Until now, is there still no perfect solution to this problem in the Vue project?

[Imshivam1]

Thanks it is working the way you explained. Great work buddy.

[batugkocak]

The accepted solution didn't work for me in Vue 3. Adding lang="postcss" seems to remove all color highlighting too.

[gokaybiz]

Well, it removes syntax highlighting in vscode even with postcss syntax highlighting extensions.