duplicate "Unknown at rule @apply css(unknownAtRules)" errors in Vue.js project

Make sure you have csstools.postcss extension installed in the VScode before starting debugging the issue as other answers suggested.

I had the same case, I went to vs code settings, searched for Unknown At Rules and select ignore there.

Solution proposed in https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-1979394

Copy pasting here to follow StackOverflow Guidelines.

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

Use <style lang="postcss">. The only problem with this fix is that VS Code's pretty syntax highlighting for CSS won't work on PostCSS code.

Adding lang="scss" worked for me:

<style lang="scss">
/* my css with @apply */
<style>

It's like you are using vscode. For me i juste install PostCSS Language Support extension from vscode and it fix my error !

For folks using neovim-lspconfig, the following configuration has worked for me both for svelte and volar. (vue)

lspconfig.volar.setup({
  -- other configuration options...
  settings = {
    css = {
      validate = true,
      lint = {
        unknownAtRules = 'ignore',
      },
    },
  },
})

Got that idea from https://github.com/LazyVim/LazyVim/discussions/520, as the volar lsp might be using a library and pass its configuration to it.

According to this Github issue the above @apply is no longer global. For me replacing it with @reference worked perfectly.

Although the question itself is interesting as to why VSCode can't be forced to do this, while the code itself runs perfectly with Vue + TailwindCSS, using TailwindCSS features inside styles in various Vue files might be convenient for hobby projects or projects with a few components.

However, this results in more separatelly run for each , which makes things less efficient. Therefore, it's better to consider @adamwathan's suggestions and look for alternatives, avoiding the use of TailwindCSS features inside in Vue and other files.

<template>
...
</template>

<style scoped>
.my-element {
  background-color: var(--bg-red-500);
}
</style>

Since you avoid using it primarily for performance reasons, the issue raised in the question is no longer relevant.

A ton of confusion amongst Tailwind users comes from not realizing that if you are using CSS modules, or blocks in Vue/Svelte/Astro, your CSS pipeline separately for every single one of those blocks.

50 Vue components using means Tailwind runs 50 separate times.

---

Source: @adamwathan

For the best build performance, don't use Tailwind features in CSS modules or Vue/Svelte/Astro blocks, just rely on CSS variables.

<template>
  <div>
    <h1>Hello world!</h1>
    <p>Lorem ipsum dolor sit amet ...</p>
  </div>
</template>

<style>
  div {
    background-color: var(--color-blue-500);
  }
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(2 * var(--spacing));
  }
</style>

---

Source: @adamwathan

Or even better, just use the classes in your markup like you're supposed to

<template>
  <div class="bg-blue-500">
    <h1 class="mb-2 text-3xl font-bold">Hello world!</h1>
    <p>Lorem ipsum dolor sit amet ...</p>
  </div>
</template>

---

Source: @adamwathan

The same thing happens by the way by just importing multiple CSS files in JS. Don't do that — import them all into one CSS file and load that one file in JS instead.

---

Source: @adamwathan