Unknown at rule @apply [unknownAtRules]

[turbid dune]

        @apply btn btn-success uppercase;

Unknown at rule @apply [unknownAtRules]

[fallow mango]

Hi @turbid dune. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The @apply directive is used to apply a set of styles from one class to another. However, if you're encountering an error with @apply, it could be due to a few reasons:

1. The class you're trying to apply does not exist. Make sure the class is defined within a @layer directive. For example, if btn is a custom class, it should be defined like this:

@layer components {
  .btn {
    /* styles */
  }
}

2. The class you're trying to apply is a Tailwind class with modifiers. Certain Tailwind classes with modifiers rely on combining classes across multiple elements. When this is used with the @apply directive in Astro <style> tags, the compiled styles are removed from the build output because they do not match any markup in the .astro file. To fix this, you can use inline classes instead:

<p class="text-black group-hover:text-gray">Astro</p>

If you're still encountering issues, it could be due to a syntax error. Astro should provide more information in the error message. If you're unable to resolve the issue, consider creating a GitHub issue (https://github.com/withastro/docs/issues/new) to alert the Astro team of the problem.

Sources:

• Astro Documentation: Class does not exist with @apply directives (https://docs.astro.build/en/guides/integrations-guide/tailwind/#class-does-not-exist-with-apply-directives)
• Astro Documentation: Class-based modifiers do not work with @apply directives (https://docs.astro.build/en/guides/integrations-guide/tailwind/#class-based-modifiers-do-not-work-with-apply-directives)
• Astro Documentation: Unknown CSS Error (https://docs.astro.build/en/reference/errors/unknown-csserror/)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@turbid dune kapa.ai is still learning and improving, please let us know how it did by reacting below

[turbid dune]

@fallow mango not solved yet, The class does exist since im using DaisyUI, and it used to work.
I'm using neovim too

[fallow mango]

Let me check the knowledge base for you. One moment! :books:

---

If you're using DaisyUI with Tailwind CSS and encountering issues with the @apply directive, it's possible that the classes you're trying to apply are not being recognized. This could be due to the order of your plugins in your Tailwind CSS configuration file. Make sure that DaisyUI is placed after the Tailwind CSS directives in your tailwind.config.js file:

module.exports = {
  // ...
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('daisyui'),
    // ...
  ],
}

As for Neovim, there are plugins available that provide syntax highlighting, treesitter parsing, and code completion for Astro. You might want to check out the Vim Plugin (https://github.com/wuelnerdotexe/vim-astro), Neovim LSP (https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro), and TreeSitter (https://github.com/virchau13/tree-sitter-astro) Plugins.

If the issue persists, consider creating a GitHub issue (https://github.com/withastro/docs/issues/new) to alert the Astro team of the problem.

Sources:

• Astro Documentation: Other Code Editors (https://docs.astro.build/en/editor-setup/#other-code-editors)
• Astro Documentation: Create GitHub Issue (https://docs.astro.build/en/guides/troubleshooting/)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: