Hi there, I would like to give coc-tailwindcss3 a shot with PureScript (React).

I didn't get it to work yet. Once it's working I would like to open a pull request to add it to the list of class regexes (similar to reason and elm).

Debugging

Classes look like this:

element progress { className: "w-56 flex" }

The coc-config is this: Is the regex fine? Do I need to set a different value? Escaping okay?

  "tailwindCSS.headwind.classRegex": {
    "purescript": "\\bclassName\\s*:\\s*\\\"([_a-zA-Z0-9\\s\\-\\:\\/]+)\\\""
  },

What I tried so far

• Different regexes
• Using purs (the extension name) instead of purescript
• Made sure the project setup is working because in index.html the extension is working fine
• Made sure coc-settings.json is recognized because I can disable the language server (and html stops working)
• Ran CocCommand tailwindCSS.forceActivate in case the file wouldn't be recognized
• Check that regex works, but could still be an issue (escaping or other mistake)

Screenshots

HTML ✔️

PureScript 👎

Regex on regex101.com

First off, thank you for creating this extension! I'd like to know if there are any plans to re-integrate Headwind with this, and if not, if you have any pointers on how one could integrate it themselves.

Recommendations are not ordered properly

e.g.
bg-* classes should be sorted first

I realize this is probably going to be too big of an ask and wishful thinking but I was wondering if you knew how I could get the tailwind autocompletion working with Clojure and Clojurescript, particularly when using the reagent and/or hiccup libraries which allows for a great Clojure-ish way of writing html that looks like:

(defn simple-component []
  [:div
   [:p "Classes can be added in a traditional manner using a clojure hashmap with a :class keyword like:"]
   [:p {:class "text-2xl font-extrabold mt-6"}]
   [:p "or can be added using a shortcut syntax of just a '.' after an html element like:"]
   [:p.text-2xl.font-extrabold.mt-6]])

If it's even possible I imagine the traditional way would be the only way to make it happen. I haven't wrapped my head around how you actually identify when to trigger the autocompletion but I imagine you recognize an eligible file and then look for the 'class' keyword as a trigger?

In this case, maybe if someone puts something like "tailwindCSS.includeLanguages": { "clojure": "html"} (which would be for files that end in .clj, .cljs, or .cljc) in the coc config file you can search for the :class keyword, or maybe anything that starts with a :<anything>. as anything after that . would be a css class, and then trigger the tailwind autocompletion.

Hi, when I work on typescriptreact files this extension doesn't seem to enable itself. Is that intentional? I tried to check the options and set tailwindCSS.includedLanguages but that didn't seem to do much.

How does one enable this extension for typescriptreact files?

When I start typing, I get autocomplete suggestions. Here I'm going to add a padding, px:

But, when I add hyphen (-) the px styles disappear:

The current example is in Vue, but I've also got the same behavior in React.

I have a monorepo that does not have a tailwind.config.js/ts file at the root.
I have packages that do have a config, and the language server works fine.
But other packages that do not have, and still have tsx files, I do not have intellisense.
When adding a dummy tailwind.config.js file at the root, it does work, but when I am into a package that has a nested config file, I do not have intellisense for the custom colors etc.
:CocCommand tailwindCSS.forceActivate as you mentioned in another issue, do not exist anymore.
How can I have default tailwind intellisense for common classes in packages that do not have a config file?
And when I am in a package that does have, use this.
Is force starting the language server even without a found config file possible to get intellisense?
Thanks!

Edit: In nvim-lspconfig I can do the following: tailwindCSS.experimental.configFile
but does not exist in coc-tailwindcss3

I see a lot of configuration options, which I love. I wanted to use tailwindCSS.emmetCompletions, but I don't know where to put it or how to use it. I tried using the :CocConfig command and including that in the json, but it didn't work. I also tried in my local coc config, and nothing.

As described in title..

After installing this extension, I get the following error after nvim startup:
(output of :CocInfo)

22-04-25T17:08:47.389 ERROR (pid:2806) [server] - unhandledRejection  Promise {                                                                                                                                                    
     <rejected> TypeError: import_coc2.RelativePattern is not a constructor
         at didOpenTextDocument (/home/stefan/.local/share/nvim/plugged/coc-tailwindcss3/lib/index.js:1036:64)
         at Array.forEach (<anonymous>)                                                                                                                                                                         
         at Object.activate (/home/stefan/.local/share/nvim/plugged/coc-tailwindcss3/lib/index.js:1042:39)
         at /home/stefan/.local/share/nvim/plugged/coc.nvim/build/index.js:231:1411                                                                                                                             
         at new Promise (<anonymous>)                                                                                                                                                                           
         at Object.activate (/home/stefan/.local/share/nvim/plugged/coc.nvim/build/index.js:231:1369)
         at i5.activate (/home/stefan/.local/share/nvim/plugged/coc.nvim/build/index.js:228:7366)
         at /home/stefan/.local/share/nvim/plugged/coc.nvim/build/index.js:230:283
         at new Promise (<anonymous>)
        at s (/home/stefan/.local/share/nvim/plugged/coc.nvim/build/index.js:230:45)
 } 

And the plugin is not usable for me :-(

Hi, the extension is not working on my SvelteKit project.

TailwindCSS is properly installed and the IntelliSense works perfectly on VSCode.

Here's my project's structure:

Here's everything I've tried so far:

• Opening nvim in the root folder and in the src folder
• Using tailwindCSS.forceActivate
• Opening my tailwind.config.cjs file
• Renaming it to tailwind.config.js
• Reinstalling the extension and the COC plugin
• Creating an index.html file to see if it works with basic html files

Nothing works, so I really don't know what to do, thanks for reading.

This is not so much an issue as a question.

I understand there is a way to add additional attributes that support auto-completion with tailwindCSS.classAttributes, but I don't know if it's possible to use that mechanism to autocomplete when using tw from twin.macro.

Examples from the twin.macro documentation:

import tw from 'twin.macro'

const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && tw`hover:border-black`]} />
)

import tw, { css } from 'twin.macro'

const hoverStyles = css`
  &:hover {
    border-color: black;
    ${tw`text-black`}
  }
`
const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && hoverStyles]} />
)

This is my CocInfo when I enter a *.html file

## versions

vim version: VIM - Vi IMproved 9.0 9000447
node version: v16.13.0
coc.nvim version: 0.0.82-b7375d5f 2023-01-30 05:09:03 +0800
coc.nvim directory: C:\Users\vivek\vimfiles\plugged\coc.nvim
term: undefined
platform: win32

## Log of coc.nvim

2023-05-12T03:49:19.049 INFO (pid:19708) [plugin] - coc.nvim initialized with node: v16.13.0 after 455
2023-05-12T03:49:37.418 INFO (pid:19708) [attach] - receive notification: showInfo []

This is my tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Am I making some simple mistake? I've followed the installation instructions.

Is there a way to set the filetype of the preview window to css, so that the colors can be highlighted with plugins like vim-css-color?

Problem

The following command throws an error:

:CocCommand tailwindCSS.headwind.sortTailwindClassesOnWorkspace
[coc.nvim] Headwind error: /home/brayan/.config/coc/extensions/node_modules/@yaegassy/coc-tailwindcss3/node_modules/.bin/rustywind: 1: empty: not found

Recreate

• Create a folder foo and go to it

• Execute

  npx tailwindcss init
  

• Create a simple HTML file with vim:

  <div class="bg-red-50 flex"> hi </div>
  

• Execute

  :CocCommand tailwindCSS.headwind.sortTailwindClassesOnWorkspace
  

Coc Info:

Note

:CocCommand tailwindCSS.headwind.sortTailwindClasses works completily fine.

CocInfo

## versions

vim version: VIM - Vi IMproved 9.0 9000749
node version: v18.13.0
coc.nvim version: 0.0.82-f3b0e2f2 2023-01-25 03:01:25 +0800
coc.nvim directory: /home/brayan/.vim/plugged/coc.nvim
term: dumb
platform: linux

## Log of coc.nvim

2023-01-25T11:30:08.957 INFO (pid:12511) [plugin] - coc.nvim initialized with node: v18.13.0 after 154
2023-01-25T11:30:08.967 INFO (pid:12511) [language-client-index] - Language server "html" started with 12525
2023-01-25T11:30:09.023 INFO (pid:12511) [language-client-index] - Language server "tailwindCSS" started with 12534
2023-01-25T11:30:18.320 INFO (pid:12511) [attach] - Request action: commandList [ 'ex', 'CocCommand ex', 13 ]
2023-01-25T11:30:22.503 INFO (pid:12511) [attach] - Request action: commandList [ 'tai', 'CocCommand tai', 14 ]
2023-01-25T11:30:25.207 INFO (pid:12511) [attach] - receive notification: runCommand [ 'tailwindCSS.headwind.sortTailwindClassesOnWorkspace' ]
2023-01-25T11:30:25.237 INFO (pid:12511) [extension:@yaegassy/coc-tailwindcss3] - rustywind stderr:
 /home/brayan/.config/coc/extensions/node_modules/@yaegassy/coc-tailwindcss3/node_modules/.bin/rustywind: 1: empty: not found

The following class is not sorted incorrectly (the result is m-2 rounded mt-1.5),

<div class="m-2 mt-1.5 rounded"></div>

Since mt-1.5 is not explicitly listed on the package.json

A quick fix is just to add mt-1.5, but I think this plugin could be more awesome if we use another package such as tailwind-classes-sorter (but I couldn't make it work 😞) or we create a new one that accepts a configuration more compact:

"tailwindCSS.headwind.defaultSortOrder": {
          "type": "array",
          "default": [
            "m-{value}",
            "mt-{value}",
            ...,
        ]
}

Is it possible to show colours like vscode?

Hi, thank you for this amazing coc extension.
Do you have plans to allow this extension be compatible with the https://twind.dev/ ?!

Another ref: https://github.com/tw-in-js/vscode-twind-intellisense

Maybe you can help..?

tailwindCSS.headwind.runOnSave does not work if formatOnSave is turned on.

{
    "coc.preferences.formatOnSaveFiletypes": ["*"],
    "tailwindCSS.headwind.runOnSave": true
}

Is there a way to get them both working together?