Setting up your editor for class-recipe

If you use Tailwind CSS, your editor can complete, preview, and lint the classes inside a recipe, as it does in a className attribute, and Prettier can sort them. Both need the names of the functions whose arguments hold classes.

Completions and hover previews

Tailwind CSS IntelliSense reads the classFunctions setting, a list of function names. Every string in a call to one of them, including the strings nested in a recipe’s config, gets completions, hover previews, and linting.

VS Code

Install the Tailwind CSS IntelliSense extension, and add to .vscode/settings.json:

{
  "tailwindCSS.classFunctions": ["cva", "sva", "cx"]
}

Zed

Add to .zed/settings.json:

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "classFunctions": ["cva", "sva", "cx"]
      }
    }
  }
}

Neovim

With Neovim 0.11 or newer and nvim-lspconfig:

vim.lsp.config("tailwindcss", {
  settings = {
    tailwindCSS = {
      classFunctions = { "cva", "sva", "cx" },
    },
  },
})
vim.lsp.enable("tailwindcss")

JetBrains

Open Settings | Languages & Frameworks | Style Sheets | Tailwind CSS, and add to the configuration:

{
  "classFunctions": ["cva", "sva", "cx"]
}

Sorting classes

prettier-plugin-tailwindcss sorts the classes in the calls of the functions listed in its tailwindFunctions option, including the strings nested in a recipe’s config:

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "./src/app.css",
  "tailwindFunctions": ["cva", "sva", "cx"]
}

tailwindStylesheet is the CSS file that imports Tailwind CSS v4. With Tailwind CSS v3, set tailwindConfig to your tailwind.config.js instead.

Other names

List every name you call the functions by:

• createRecipe and createSlotRecipe, if you import the long names.
• The names you give the functions of createRecipes, such as tv in export const { cva: tv } = createRecipes({ join: twMerge }).