vim 2022-08-15 | Slack Archive

Chase16:08:13

For the super small subset of folks who use coc.nvim and tailwind in their Clojure/Script projects and want autocompletion/docs I found a way to do it. You want to use this plugin and coc extension: https://github.com/yaegassy/coc-tailwindcss3 and in your coc-settings.json want to add:

"tailwindCSS.experimental.classRegex": [                                                       
    ":class\\s+\"([^\"]*)\""                                                                     
  ],                                                                                             
  "tailwindCSS.includeLanguages": {                                                              
    "clojure": "html",                                                                           
  }

Right now, this will only work when using the [:h1 {:class "text-3xl font-extrabold mt-6"} "Hello World!"] style. I would appreciate it if anyone can help figure out the regex to get it working for the [:h1.text-3xl.font-extrabold.mt-6 "Hello World!"] shortened style.

💡 2

lemuel16:08:34

"tailwindCSS.includeLanguages": {
        "clojure": "html"
    },
    "[clojure]": {
        "editor.snippetSuggestions": "bottom",
        "tailwindCSS.experimental.classRegex": [
            [
                ":\\w+([^\\s]*)",
                "\\.([^\\.]*)"
            ],
        ]
    },

I'm a bit lost when it comes to regex but I've tweaked this snippet originally based on Ruby’s haml syntax and it seems to work

Chase23:08:43

Hmmm. It's not quite working for me. I get the autocompletion as soon as I enter [ which is not quite right. And then I don't get the autocompletion after something like [:div.| I'll keep tweaking it though and see if I can figure it out.

Chase21:08:32

Here is the full working solution I have with some regex help from the #beginners channel:

"tailwindCSS.experimental.classRegex": [                                                       
    ":class\\s+\"([^\"]*)\"",                                                                    
    ":[\\w-.#>]+\\.([\\w-]*)"                                                                    
  ],                                                                                             
  "tailwindCSS.includeLanguages": {                                                              
    "clojure": "html"                                                                            
  }

👍 1

2022-08-15

Channels