Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yaegassy/coc-tailwindcss3
Intelligent Tailwind CSS tooling for coc.nvim
https://github.com/yaegassy/coc-tailwindcss3
coc coc-extension coc-nvim neovim tailwindcss tailwindcss-v2 tailwindcss-v3 vim
Last synced: 12 days ago
JSON representation
Intelligent Tailwind CSS tooling for coc.nvim
- Host: GitHub
- URL: https://github.com/yaegassy/coc-tailwindcss3
- Owner: yaegassy
- License: mit
- Created: 2022-04-13T10:02:20.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-01T00:16:57.000Z (about 1 month ago)
- Last Synced: 2024-10-18T06:36:47.371Z (23 days ago)
- Topics: coc, coc-extension, coc-nvim, neovim, tailwindcss, tailwindcss-v2, tailwindcss-v3, vim
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@yaegassy/coc-tailwindcss3
- Size: 685 KB
- Stars: 204
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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).
## Install
```vim
:CocInstall @yaegassy/coc-tailwindcss3
```
> scoped packages
## Prepare
Create tailwindCSS configuration in your project.
> this extension need the configuration exists in your project
```bash
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**:
```vim
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 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.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)