Does Tailwind CSS natively understand Hiccup?

[gerdint]

I noticed in the tailwind config that the CLJS source directory is directly referenced. So Tailwind actually recognises Hiccup-style class names by default?

I'm asking because it would surprise me in that I have seen several other more complicated ways to have Clojure and Tailwind work together (generating HTML from Hiccup, and have Tailwind parse that etc).

[jacekschae]

Thanks for your question. I hope i can clarify this a bit. It is important to notice that we reference in dev and prod two different directories as written in the readme:

... It will observe cljs-runtime/*.js files in dev and will use main.js for creating a release build.

Tailwind works by scanning files specified in config and then going through strings. If you have:

[:div {:class "sm:mx-auto sm:w-full sm:max-w-md"}]

or this hiccup

[:div.sm:mx-auto.sm:w-full.sm:max-w-md]

Then it should work with the current setup - CLJS and shadow-cljs.

There is a bit of things you need to take into account the current setup is using shadow-cljs and parsing js files (in cljs-runtime folder, which are js files that already have strings if you use hiccup shorthand syntax), or cljs files. If you think about "regular" hiccup (the one on jvm) your setup might differ. In general i would recommend to make a convention to use the :class syntax and not the shorthand notation of hiccup - this will simplify your setup.

Things to consider:

• Am i using hiccup with JS (CLJS) and shadow-cljs? Use the setup as in this repo and it should work with :class and shorthand syntax.

• Am I using hiccup with JVM (CLJ)? Probably you will only have tailwind config and no CLJS setup and when the clj files are scanned then you will be better by using :class notation and not the shorthand hiccup syntax :div.sm:mx-auto.sm:w-full.sm:max-w-md this will not be recognized as string and the classes won't be added to your css file.

If there is anything still not clear please let me know and i'll try to clarify further.

[gerdint]

Thanks for the thorough explanation! Personally I am actually using Hiccup both on the client (CLJS) and the backend (no serve-side React, just vanilla static markup generated with Hiccup). It's good to know that Tailwind actually just scans strings for its class names, I was under the impression that it looked for 'class' attributes of some kind (which then makes things more complex).
Right now I use a more complicated solution on the backend (transformation of the Hiccup to HTML and let Tailwind parse that). The upside is that it works also with the shortcut :tag.clz1 syntax, but I could consider sacrificing that for a simpler pipeline.