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 :heavy_check_mark:

PureScript :-1:

Regex on regex101.com

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

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.

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]} />
)

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?

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.

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 :-(

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.

There are a number of tailwindcss completion items that contain "dash" (-).

When you type a "dash", the completion menu disappears, so you can avoid this problem by adding a "dash" with vim's iskeyword option

However, Since coc.nvim v0.0.82, the iskeyword option in vim does not seem to be respected in completion.

Added the feature to "force completion" when entering "dash".

DEMO (mp4)

https://user-images.githubusercontent.com/188642/179870603-c288314b-7a46-4d0f-ab56-dfc9c4e520c0.mp4

Related issue

• https://github.com/yaegassy/coc-tailwindcss3/issues/8

Hi, recently I saw that document-color.nvim implements the document colorizer feature. I think it is very cool and useful. So I try to implements the some feature in coc-tailwindcss3.

Description

To edit css-related files, it is convenient to use coc-css. A language server with vscode-css-languageservice feature is started.

However, this language server has some minor problems, such as issuing warnings for TailwindCSS-specific syntax, etc. e.g. @tailwind, @apply, @screen, @layer and more.

To solve these problems, tailwindcss-intellisense seems to provide a dedicated css language server for TailwindCSS.

REF:

• https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/vscode-tailwindcss/src/cssServer.ts

Usage

Prepare

1:

the language server module for this css requires v0.8.0 or later of vscode-tailwindcss. Please check here for an example of using the server module installed with vsix.

• https://github.com/yaegassy/coc-tailwindcss3#usage-example-1-vsix
• https://github.com/yaegassy/coc-tailwindcss3#usage-example-2-use-extensions-installed-in-vscode

The npm package @tailwindcss/language-server does not yet include this server module.

Note: To be published in npm in the near future. https://github.com/tailwindlabs/tailwindcss-intellisense/issues/536

2:

Add the g:coc_filetype_map setting to your ".vimrc/init.vim". Add a configuration entry mapping the file type named *.tailwindcss to tailwindcss.

This is an example of the css.tailwindcss filetype. Of course, you can also use another css-related filetype, such as scss.tailwindcss.

let g:coc_filetype_map = {
 \ 'css.tailwindcss': 'tailwindcss',
 \ }

3:

Add tailwindCSS.custom.cssModeServerPath to coc-settings.json. The file path of the css server module must be set correctly for your environment.

{
  "tailwindCSS.custom.cssModeServerPath": "/path/to/tailwindcss-language-server/extension/dist/tailwindModeServer.js",
}

Edit

1. Open the css-related file.
2. Change the filetype to css.tailwindcss.
   • :set filetype=css.tailwindcss
   • The css mode server provided by tailwindcss-intellisense starts up.