# coc-tailwindcss3 > fork from [vscode-tailwindcss](https://github.com/tailwindlabs/tailwindcss-intellisense/tree/master/packages/vscode-tailwindcss) and [headwind](https://github.com/heybourn/headwind) Intelligent Tailwind CSS tooling for [coc.nvim](https://github.com/neoclide/coc.nvim). coc-tailwindcss3-screenshot ## Install ```vim :CocInstall @yaegassy/coc-tailwindcss3 ``` > scoped packages ## Configuration options - `tailwindCSS.enable`: Enable coc-tailwindcss3 extension, default: `true` - `tailwindCSS.trace.server`: Trace level of tailwindCSS language server, default: `off` - `tailwindCSS.custom.serverPath`: Custom path to server module. If there is no setting, the built-in module will be used, default: `""` - `tailwindCSS.emmetCompletions`: Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`, default: `false` - `tailwindCSS.includeLanguages`: Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language. E.g.: `{"plaintext": "html"}`, default: `{ "eelixir": "html", "elixir": "html", "eruby": "html", "html.twig": "html" }` - `tailwindCSS.files.exclude`: Configure glob patterns to exclude from all IntelliSense features. Inherits all glob patterns from the `#files.exclude#` setting, default: `["**/.git/**", "**/node_modules/**", "**/.hg/**", "**/.svn/**"]` - `tailwindCSS.classAttributes`: The HTML attributes for which to provide class completions, hover previews, linting etc, default: `["class", "className", "ngClass"]` - `tailwindCSS.suggestions`: Enable autocomplete suggestions, default: `true` - `tailwindCSS.hovers`: Enable hovers, default: `true` - `tailwindCSS.codeActions`: Enable code actions, default: `true` - `tailwindCSS.validate`: Enable linting. Rules can be configured individually using the `tailwindcss.lint.*` settings, default: `true` - `tailwindCSS.lint.cssConflict`: Class names on the same HTML element which apply the same CSS property or properties, valid option ["ignore", "warning", "error"], default: `warning` - `tailwindCSS.lint.invalidApply`: Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply), valid option ["ignore", "warning", "error"], default: `error` - `tailwindCSS.lint.invalidScreen`: Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen), valid option ["ignore", "warning", "error"], default: `error` - `tailwindCSS.lint.invalidVariant`: Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants), valid option ["ignore", "warning", "error"], default: `error` - `tailwindCSS.lint.invalidConfigPath`: Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme), valid option ["ignore", "warning", "error"], default: `error` - `tailwindCSS.lint.invalidTailwindDirective`: Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind), valid option ["ignore", "warning", "error"], default: `error` - `tailwindCSS.lint.recommendedVariantOrder`: Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only), valid option ["ignore", "warning", "error"], default: `error` - `tailwindCSS.lint.suggestCanonicalClasses`: Indicate when utilities may be written in a more optimal form, valid option ["ignore", "warning", "error"], default: `warning` - `tailwindCSS.experimental.classRegex`: ... - `tailwindCSS.inspectPort`: Enable the Node.js inspector agent for the language server and listen on the specified port, default: `null` - `tailwindCSS.headwind.defaultSortOrder`: Sort order: A string array that determines the default sort order. - Check the "Configuration" section of [package.json](package.json) for default values. - `tailwindCSS.headwind.classRegex`: An object with language IDs as keys and their values determining the regex to search for Tailwind CSS classes. - Check the "Configuration" section of [package.json](package.json) for default values. - `tailwindCSS.headwind.runOnSave`: A flag that controls whether or not Headwind will sort your Tailwind CSS classes on save, default: `false` - `tailwindCSS.headwind.removeDuplicates`: A flag that controls whether or not Headwind will remove duplicate Tailwind CSS classes, default: `true` - `tailwindCSS.headwind.prependCustomClasses`: A flag that controls whether or not Headwind will move custom CSS classes before (true) or after (false) the Tailwind CSS classes, default: `false` - `tailwindCSS.headwind.customTailwindPrefix`: If the Tailwind Prefix function is used, this can be specified here (e.g. tw-), default: `""` ## Commands - `tailwindCSS.showOutput`: Tailwind CSS: Show Output - `tailwindCSS.headwind.sortTailwindClasses`: Headwind: Sort Tailwind CSS Classes ## Custom Server Path > tailwindCSS.custom.serverPath: Custom path to server module. If there is no setting, the built-in module will be used, default: "" This setting allows you to use the tailwind's language server module installed in any location. ### Usage Example 1 (Use extensions installed in VSCode) **setting**: ```jsonc { "tailwindCSS.custom.serverPath": "/path/to/.vscode/extensions/bradlc.vscode-tailwindcss-0.12.3/dist/tailwindServer.js } ``` ### Usage Example 2 (npm) **prepare**: ```bash npm i -g @tailwindcss/language-server ``` or `insiders` verson ```bash npm i -g @tailwindcss/language-server@insiders ``` - **setting**: ```jsonc { "tailwindCSS.custom.serverPath": "/path/to/.nvm/versions/node/v20.15.0/bin/tailwindcss-language-server" } ``` ## Thanks - - - ## License MIT --- > This extension is built with [create-coc-extension](https://github.com/fannheyward/create-coc-extension)