Neovim, LSP, CSS and 'Unknown at rule @tailwind'

Neovim-CSS-LSP-Fix.md

How to fix "Unknown at rule @[type]" warnings in NeoVim

When using Tailwind CSS within a .css file in Neovim with cssls (CSS Language Server) linting enabled, these type of diagnostic warnings are shown:

@tailwind base;   /* - Unknown at rule @tailwind */

body {
  @apply text-red-500;  /* - Unknown at rule @apply */
}

How to resolve this problem?

In NeoVim, use this command: Neoconf to show a popup window with the options to edit or create neoconf.json files.

If the file does not exists, then create a global neoconf.json file and add following:

{
  "lspconfig": {
    "cssls": {
      "css": {
        "validate": true,
        "lint": {
          "unknownAtRules": "ignore"
        }
      }
    }
  }
}

That is all what you need to silence the cssls warnings.

Further Reading / References:

See the Neovim/nvim-lspconfig - Server Configurations page or within Neovim use the command: :help lspconfig-all for further instructions on how to configure your LSP / linter setup.

cssls configuration options

See CSS Language Server options for further reference.

Additionally, see neoclide/coc-css for a more extensive list of cssls configuration options.