@yaegassy/coc-tailwindcss3
v0.5.19
Published
Intelligent Tailwind CSS tooling for coc.nvim
Downloads
685
Maintainers
Readme
coc-tailwindcss3
fork from vscode-tailwindcss and headwind
Intelligent Tailwind CSS tooling for coc.nvim.
Install
:CocInstall @yaegassy/coc-tailwindcss3
scoped packages
Prepare
Create tailwindCSS configuration in your project.
this extension need the configuration exists in your project
npx tailwindcss init
TIPS
coc-tailwindcss3
may not work for some projects such as monorepo or depending on how Vim/Neovim is started. Try one of the following methods
Open the tailwindcss configuration file
Open the tailwind.config.js
or tailwind.config.cjs
file that exists in your project.
workspaceFolders
workspaceFolders
may not have been properly recognized. To make coc.nvim recognize workspaceFolders
correctly, you can set b:coc_root_patterns
in .vimrc/init.vim
Example for html filetype:
au FileType html let b:coc_root_patterns = ['.git', '.env', 'tailwind.config.js', 'tailwind.config.cjs']
Also, workspaceFolders
can be adjusted manually. Set the directory where tailwind.config.js
or tailwind.config.cjs
exists.
See the coc.nvim wiki for more information.
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 examplediv.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 thetailwindcss.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 thetheme
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.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 OutputtailwindCSS.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
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