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

[milelo]

I developed these regex's for hiccup.

Supported forms:

:div.c1.c2
:.c1.c2 ;defaults to div
{:class :c1.c2
{:class "c1 c2"}
{:class  ["c1" :c2]}

depending on the hiccup flavour, some of these hiccup forms may not be supported.

VScode Settings:

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

[chase-lambert]

Hi @milelo, the :class based approach works for me (edit: well the old fashioned :class "c1 c2" way. I didn't even know you can do those other ways but they don't work for me here anyways) but I'm still not getting suggestions when trying the :div.c1.c2 way. Do you have a small repo that this works on you can share?

[milelo]

Hi @milelo, the :class based approach works for me (edit: well the old fashioned :class "c1 c2" way. I didn't even know you can do those other ways but they don't work for me here anyways) but I'm still not getting suggestions when trying the :div.c1.c2 way. Do you have a small repo that this works on you can share?

That makes me think you could have some conflicting settings.

Look at https://github.com/milelo/biff-electric-hiccup and its HTML Styling section.

Ensure you don't have any user-settings for the plugin while you try it.

[Peluko]

@milelo thanks for your settings, they are working for me. I've updated the settings to support some multiline class vectors, by using keywords or symbols. For example, this settings work for:

  [:div {:class [:h-4
                 :w-10
                 :bg-slate-200]}]

and for

  [:div {:class '[h-4
                  w-10
                  bg-slate-200]}]

The only changes are on your last regex and a new added another one. Here is the full setup:

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

I don't know if this has other side effects, but for now it's working.

Regards.

[chase-lambert]

I tweaked the ones above to also include Fulcro's style syntax sugar (dom/div :.c1.c2 ...

"\\:(\\.[^\\s#]+(?:\\.[^\\s#]+)*)" "\\.([^\\.\\s#]+)" 

And for any neovim users here is how I got this all working when I switched from coc.nvim to the builtin lsp capabilities:

  {
    "luckasRanarison/tailwind-tools.nvim",
    name = "tailwind-tools",
    build = ":UpdateRemotePlugins",
    dependencies = {
      "nvim-treesitter/nvim-treesitter",
      "nvim-telescope/telescope.nvim",
      "neovim/nvim-lspconfig",
    },
    opts = {
      server = {
        override = true,
        settings = {
          emmetCompletions = true,
          includeLanguages = { clojurescript = "html" },
          experimental = {
            classRegex = {
              { "\\[:[^.\\s]*((?:\\.[^.\\s\\]]*)+)[\\s\\]]", "\\.([^.]*)" },
              { "\\:(\\.[^\\s#]+(?:\\.[^\\s#]+)*)", "\\.([^\\.\\s#]+)" },
              { "\\:class\\s+(\\:[^\\s\\}]*)[\\s\\}]", "[\\:.]([^.]*)" },
              { "\\:class\\s+(\"[^\\}\"]*)\"", "[\"\\s]([^\\s\"]*)" },
              { "\\:class\\s+\\[([\\s\\S]*)\\]", "[\"\\:]([^\\s\"]*)[\"]?" },
              { "\\:class\\s+'\\[([\\s\\S]*)\\]", "([^\\s]*)?" },
            },
          },
        },
      },
    },
  },