tailwindcss class name completion for (neo)vim

  • By 年糕小豆汤
  • Last update: Dec 29, 2022
  • Comments: 17

Tailwind CSS IntelliSense

fork from vscode-tailwindcss v0.2.0

Tailwind CSS class name completion for coc.nvim

image

Install

CocInstall coc-tailwindcss

or with vim-plug, in your .vimrc/init.vim inside the plug#begin/end block:

Plug 'iamcco/coc-tailwindcss',  {'do': 'yarn install --frozen-lockfile && yarn run build'}

Create tailwindCSS configuration in your project

this extension need the configuration exists in your project

tailwind init

Settings

  • tailwindCSS.trace.server Trace level of tailwindCSS language server, default: off

  • tailwindCSS.emmetCompletions Enable class name completions for Emmet-style syntax, default: false

  • tailwindCSS.cssLanguages css languages completion support, default:

    [ "css", "less", "postcss", "sass", "scss", "stylus", "vue" ]

  • tailwindCSS.jsLanguages javascript languages completion support, default:

    [ "javascript", "javascriptreact", "reason", "typescriptreact" ]

  • tailwindCSS.htmlLanguages html languages completion support, default:

    [ "blade", "edge", "eelixir", "ejs", "elixir", "elm", "erb", "eruby", "haml", "handlebars", "htmldjango", "html", "HTML (EEx)", "HTML (Eex)", "html.twig", "jade", "leaf", "markdown", "njk", "nunjucks", "php", "razor", "slim", "svelte", "twig", "vue" ]

Features

Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.

HTML (including Vue, JSX, PHP etc.)

  • Class name suggestions
    • Suggestions include color previews where applicable, for example for text and background colors
    • They also include a preview of the actual CSS for that class name
  • CSS preview when hovering over class names

CSS

  • Suggestions when using @apply and config()
  • Suggestions when using the @screen directive
  • Improves syntax highlighting when using @apply and config()

Headwind

fork from headwind

Headwind is an opinionated Tailwind CSS class sorter for coc.nvim. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

Headwind runs on save, will remove duplicate classes and can even sort entire workspaces.

Usage

You can trigger Headwind by:

Commands

  • tailwindCSS.headwind.sortTailwindClasses Sort Tailwind CSS Classes
  • tailwindCSS.headwind.sortTailwindClassesOnWorkspace Sort Tailwind CSS Classes on Entire Workspace

Headwind can sort individual files by running tailwindCSS.headwind.sortTailwindClasses via the Command Palette. Workspaces can also be sorted by running tailwindCSS.headwind.sortTailwindClassesOnWorkspace.

Any breakpoints or unknown classes will be moved to the end of the class list, whilst duplicate classes will be removed.

Customisation

Headwind ships with a default class order (located in package.json). You can edit this (and other settings) to your liking on the extension settings page.

tailwindCSS.headwind.classRegex:

An object with language IDs as keys and their values determining the regex to search for Tailwind CSS classes. The default is located in package.json but this can be customized to suit your needs.

There can be multiple capturing groups, that should only contain a string with Tailwind CSS classes (without any apostrophies etc.). If a new group, which doesn't contain the class string, is created, ensure that it is non-capturing by using (?:).

Example from package.json:

"tailwindCSS.headwind.classRegex": {
		"html": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
		"javascriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
}

tailwindCSS.headwind.sortTailwindClasses:

An array that determines Headwind's default sort order.

tailwindCSS.headwind.removeDuplicates:

Headwind will remove duplicate class names by default. This can be toggled on or off.

"tailwindCSS.headwind.removeDuplicates": false

tailwindCSS.headwind.runOnSave:

Headwind will run on save by default (if a tailwind.config.js file is present within your working directory). This can be toggled on or off.

"tailwindCSS.headwind.runOnSave": false

Github

https://github.com/iamcco/coc-tailwindcss

Comments(17)

  • 1

    Coc-Tailwindcss works in 1 project but not the other

    Hi,

    I've been using Coc-vim along with coc-tailwindcss for a while now on a project. I just started a new project on the same computer and coc-tailwindcss does not seem to be working. I use a Rails template with TailwindCSS so I know that Tailwind is installed and working. Strange thing is, if I switch back to the other project, coc-tailwindcss works again. I have tailwind.config.js in both projects under app>javascript>stylesheets. plus I added tailwind classes to both and both render perfectly. So maybe the extension is not picking up Tailwind for some reason?? Any help is appreciated. Thanks!

    :CocInfo gives me this:

    ## versions

vim version: NVIM v0.5.0-dev

node version: v8.17.0

coc.nvim version: 0.0.77-322876fe15

term: tmux-256color platform: linux

## Output channel: prettier

## Output channel: tailwindcss-language-server
  • 2

    auto-completion elsewhere than class

    Related to #15

    I'm working with d3.js, and using tailwindcss classes with the .classed() d3 method

    d3.selectAll('circle')
    .classed('fill-current text-red-300', true);

    I'd like to have coc-tailwindcss auto-completion when my cursor is within a classed(""), but so far coc-tailwindcss seems to only autocomplete html elements within a class="". I couldn't understand where in your code you're setting this completion rule. Can we add custom locations to trigger coc-tailwindcss?

  • 3

    Isnt working with coc

    I'm unable to get this to work in my coc setup. Is there anything I need to know to get this to work? Are there anymore options I can set in CocConfig? I have a project with tailwindcss installed and I don't get any intellisense while editing.

  • 4

    Multiple filetypes (html.twig)

    The classname suggestions only work if the filetype is html. Is it possible to make this work if the filetype is html.twig (or anything else combined with html)?

    Works after running this in vim: :set ft=html. Doesn't work after running this: :set ft=html.twig.

    Anyway, great plugin!

  • 5

    warning from tailwindcss-language-server

    Just installed coc and coc-tailwindcss, thanks for making it! While learning about coc, I found this warning:

    :CocList extensions
 * coc-tailwindcss 0.3.2 ~/.config/coc/extensions/node_modules/coc-tailwindcss
 * coc-snippets 2.1.17 ~/.config/coc/extensions/node_modules/coc-snippets

:CocInfo
## versions

vim version: NVIM v0.4.3
node version: v13.6.0
coc.nvim version: 0.0.74-db5ffd2ff0
term: screen-256color
platform: linux

## Messages

## Output channel: snippets


## Output channel: tailwindcss-language-server

Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[]

    Is that something to worry about, or I can ignore the warning?

    my setup is very simple with the following code in my rollup.config.js:

    export default {
  ...,
  plugins: [
    postcss({
      plugins: [require("tailwindcss"), require("autoprefixer")]
    })
  ]
};
  • 6

    Support for Elm language

    Hi,

    I am using tailwind with Elm for one of my projects. Currently coc-tailwindcss doesn't support Elm and I was wondering if it could be added. I am willing to do this myself but I can't really understand how to debug the extension. I would be glad for any help to add the support.

    Thanks

  • 7

    It works under 1.0 ?

    Hi, Now that tailwind reach an stable version I was wondering if it works. I was trying this repo https://github.com/tailwindcss/playground and under my (neo)vim doesn't works.

    I try to put the config under the json file and also as a 'g:coc_user_config' property on my vimrc.

    Thanks

  • 8

    Adding support for tailwind ppx

    This is an exploratory pull request to add support for tailwind-ppx, a Reason/OCaml ppx that helps you validate your Tailwind classes at compile-time: https://github.com/dylanirlbeck/tailwind-ppx. The syntax is as follows:

    <Component className=[%tw "flex flex-row"] />

    I do need help understanding what to do with line 6908, since the only way you get auto completion to show up is by forcing the function to return true.

    Feel free to reject this pull request, though I thought that modifying the regexp adds little to no overhead to the language server. Cheers!

  • 9

    hbs does not support

    In the same project, coc-tailwindcss for *.html works fine. When I switch into *.hbs file it doesn't work. In readme there is information that is supports handlebars. Should I configure something extra if want to use with .hbs files ?

  • 10

    chore(deps): bump follow-redirects from 1.9.0 to 1.14.7

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 11

    chore(deps): bump tar from 4.4.10 to 4.4.15

    Bumps tar from 4.4.10 to 4.4.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 12

    Tailwind 3.0 Support?

    The most recent update is one and half years ago, will coc-tailwindcss work with tailwind 3.x? if not is there other alternative for tailwindcss in vim? Thanks!

  • 13

    chore(deps): bump follow-redirects from 1.9.0 to 1.14.8

    Bumps follow-redirects from 1.9.0 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    chore(deps): bump ajv from 6.10.2 to 6.12.6

    Bumps ajv from 6.10.2 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @​cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    Not working with latest coc.nvim

    Expected behavior Extension working

    Screenshots If applicable, add screenshots to help explain your problem. image

    Desktop (please complete the following information):

    • OS: ArchLinux

    Log:

    ## versions

vim version: NVIM v0.7.0-dev+1003-gb667bb355
node version: v17.3.0
coc.nvim version: 0.0.80-7019b69e88
coc.nvim directory: /home/ulti/.local/share/nvim/site/pack/packer/start/coc.nvim
term: WezTerm
platform: linux

## Log of coc.nvim

2022-02-11T11:45:09.151 INFO (pid:35183) [services] - registered service "languageserver.ocaml-lsp"
2022-02-11T11:45:09.176 INFO (pid:35183) [services] - registered service "diagnostic-languageserver"
2022-02-11T11:45:09.809 WARN (pid:35183) [workspace] - workspace.createOutputChannel is deprecated, please use window.createOutputChannel instead. 
    at Object.<anonymous> (/home/ulti/.config/coc/extensions/node_modules/coc-tailwindcss/out/index.js:14:7870)
    at Generator.next (<anonymous>)

    Thanks for the hard work!

  • 16

    feat: support tailwindcss "v3" and use of server package

    Description

    The other day, version 3 of tailwindcss was officially released. https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0

    The current coc-tailwindcss does not seem to be able to use v3 properly and comfortably. :(

    I created a PR for v3 referenced on upstream code. 🙇 https://github.com/tailwindlabs/tailwindcss-intellisense/tree/master/packages/vscode-tailwindcss

    As a side note, I have confirmed that tailwindcss v2 can also be used.

    Summary

    • Changed to use @tailwindcss/language-server
    • "lsp/tailwindcss-language-server" has been removed.
    • Added "initializationOptions" and "settings" needed to start @tailwindcss/language-server
      • [EDIT] Some of the initializationOptions are no longer required in v0.0.7.
    • Added tailwindCSS.showOutput command
      • This can be selected and displayed with workspace.showOutput, but as with "upstream", we have added a dedicated command.
    • Removed tailwindCSS.cssLanguages, tailwindCSS.jsLanguages, tailwindCSS.htmlLanguages settings
      • New configuration, tailwindCSS.includeLanguages has been added.
    • [EDIT] Changed "activationEvents" from * to workspaceContains:**/tailwind.config.js, etc...
    • [EDIT] Added a custom setting called tailwindCSS.custom.serverPath.
    • Other adjustments.

    DEMO (mp4)

    Before

    https://user-images.githubusercontent.com/188642/147442099-8a15b87e-cb00-4ce0-9f4c-d7ee5b37135b.mp4

    After

    https://user-images.githubusercontent.com/188642/147442111-db10823f-8fc8-40fc-88e3-54766201c625.mp4

  • 17

    [css unknownAtRules] [W] Unknown at rule @tailwind

    Describe the bug

    Here is what's in my style.css file:

    @tailwind base;
@tailwind components;
@tailwind utilities;

    I'm seeing the following error: [css unknownAtRules] [W] Unknown at rule @tailwind

    To Reproduce I simply followed your install instructions: CocInstall coc-tailwindcss

    Is there anything else I need to do?

    Expected behavior I would expect not to see this error

    Screenshots

    Screen Shot 2021-09-21 at 1 50 27 PM

    Desktop (please complete the following information):

    • OS: MacOs

Popular Tag

Related