Support for ClojureScript?

[bigodel]

is there any plans on adding support for ClojureScript? i'd be willing to help!

[WindOfMind]

Also interested in that!

[bradlc]

Hey! I am not familiar with ClojureScript. How do you use CSS classes with that?

[WindOfMind]

Hi! Basically, ClojureScript uses Hiccup (https://github.com/weavejester/hiccup).
So, you can provide classes in the next ways:

[:div.bg-gray-100]

or (as a map with attributes)

[:div {:class "bg-gray-100"}]

And Tailwind Intellisense doesn't work in these cases, at least for me. If I start typing class="bg-", it will work. But in ClojureScript, we don't provide classes in that way. Any advice for that?

[bradlc]

Thanks for that @WindOfMind! I am reluctant to add first-class support for syntaxes that don't resemble traditional HTML (i.e. class=""), but there is a solution that might work for you. There is a tailwindCSS.experimental.classRegex setting that you can use to define custom places where CSS classes might exist in your code. So for your second example you could configure tailwindCSS.experimental.classRegex like this:

"tailwindCSS.experimental.classRegex": [
  ":class\\s+\"([^\"]*)\""
]

You can read more about this here: tailwindlabs/tailwindcss#7553. Hope that helps!

[chase-lambert]

This works great, thanks so much. Has anyone figured out the proper regex for the [:h1.text-3xl.font-extrabold.mt-6 "Hello, World!"] shortcut style of writing out the css classes?

[bigodel]

This works great, thanks so much. Has anyone figured out the proper regex for the [:h1.text-3xl.font-extrabold.mt-6 "Hello, World!"] shortcut style of writing out the css classes?

i had some success in the past with this, hope it helps

[chase-lambert]

Hey, thought I would share this for those who end up here when looking for a Clojure or ClojureScript solution like I did, some nice folks on the Clojure slack helped me find this full solution that gives you autocompletion using both styles of hiccup (eg. [:h1 {:class "text-3xl font-extrabold mt-6"} "Hello, World!] and [:div.text-3xl.font-extrabold.mt-6 "Hello, World!]):

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

[chase-lambert]

Does the above solution still work for everyone? For some reason the [:div.text-3xl.font-extrabold.mt-6 "Hello, World!"] method doesn't give me autocomplete anymore. I haven't figured out what has changed. The :class "..." method still works for autocompletion so it is properly detecting the clojure file for css if that makes sense.

Probably unrelated but I noticed there is a tailwindCSS.emmetCompletions setting now (not sure when it was added, could be old) and that is very similar to our hiccup style (e.g. div.text-3xl.font-extrabold...) so this should be possible somehow.

Also, is anyone able to get sorting to work from this tool: https://github.com/heybourn/headwind in your clojure code?

I am using this vim plug-in if that makes a difference in why things are different for me: https://github.com/yaegassy/coc-tailwindcss3