coc-tailwindcss3

fork from vscode-tailwindcss and headwind

Intelligent Tailwind CSS tooling for coc.nvim.

Install

: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, valid option ["ignore", "warning", "error"], default: error
• tailwindCSS.lint.invalidScreen: Unknown screen name used with the @screen directive, valid option ["ignore", "warning", "error"], default: error
• tailwindCSS.lint.invalidVariant: Unknown variant name used with the @variants directive, valid option ["ignore", "warning", "error"], default: error
• tailwindCSS.lint.invalidConfigPath: Unknown or invalid path used with the theme helper, valid option ["ignore", "warning", "error"], default: error
• tailwindCSS.lint.invalidTailwindDirective: Unknown value used with the @tailwind directive, valid option ["ignore", "warning", "error"], default: error
• tailwindCSS.lint.recommendedVariantOrder: Class variants not in the recommended order (applies in JIT 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 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 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:

{
  "tailwindCSS.custom.serverPath": "/path/to/.vscode/extensions/bradlc.vscode-tailwindcss-0.12.3/dist/tailwindServer.js
}

Usage Example 2 (npm)

prepare:

npm i -g @tailwindcss/language-server

or insiders verson

npm i -g @tailwindcss/language-server@insiders

• https://www.npmjs.com/package/@tailwindcss/language-server/v/insiders?activeTab=versions

setting:

{
  "tailwindCSS.custom.serverPath": "/path/to/.nvm/versions/node/v20.15.0/bin/tailwindcss-language-server"
}

Thanks

• https://github.com/tailwindlabs/tailwindcss-intellisense
• https://github.com/heybourn/headwind
• https://github.com/iamcco/coc-tailwindcss

License

MIT

---

This extension is built with create-coc-extension