Generate class lists

[awb99]

Hi!
I deal with documents that consist of hiccup that might contain arbitrary tailwind markup. I therefore would like to use girouette to generate one or more css files.
I was able to generate css for individual styles, and this works really wonderful once one knows the list of tags.

What I would like to have is a way to create a css file based on possible combinations.

This idea I think is also a good way to enforce proper style template guides, or in other words make sure that multiple documents use the same styles / have a common design philosophy. If everything is possible then at some point there is chaos and nothing works.

Thanks

[green-coder]

What I would like to have is a way to create a css file based on possible combinations.

Hi, can you give an example of what you need?

[awb99]

Sure. So the app I am building is goldly. https://github.com/pink-gorilla/goldly
Goldly is liek a universal visualization platform. There is a clojurescript repl in the browser at runtime where users
can do evaluations. Additionally users can do clojure evaluations and sned the results to the browser for visualization.
Goldly allows users to add custom ui render components that get written with hiccup. So in goldly context it is not
possible at all to know which tailwind tags need to be in the css.

So it would be amazing, if I could generate a tailwind css file, similar to how tailwind + purge css work.
So I would liek to give it a config that it should generate, and then it will just generate it.

so say (girouette/generate {:colors ["blue" 50 100 500 900] :color-tags ["bg" "hover" "text-"]}) Of course the config
would be much bigger than that. But if I take this example, then you would generate
text-blue-50
text-blue-100
text-blue-500
text-blue-900
bg-blue-50
bg-blue-100
bg-blue-500
bg-blue-900
hover:bg-blue-50
hover:bg-blue-100
hover:bg-blue-500
hover:bg--blue-900
hover:text-blue-50
hover:text-blue-100
hover:text-blue-500
hover:text-blue-900
hover:bg-blue-50

Unfortunately I dont know enough about tailwind to understand which combinations it woul dneed to generate.
But I don think it is too complicated.

I forsee a two tier approach really.
First, ship a reasonable short tailwind-css that can be used as a default.
Second, give a clojure function that can generate a custom config.
Third, do something like you do in finding which classes are actually needed, and then generate just that css.

For the third option, I would need to create a custom class function that would enter all elements that are rendered
that way into the config of tags that are needed.

The reason why I cannot rely on the girouette approahc as it stands is that there is clojure and clojurescript code,
and notebooks that all could use tailwind tags. So it is not possible to find out via a simple scan as you do it.

I hae hacked something together for now here: https://github.com/pink-gorilla/webly/blob/master/frontend/src/frontend/tailwind/generator.clj

Even with just my 30 or so github repos, I cannot find all the tailwind tags that I have been using so far.

The rason why I go through this effort is, that I do not want to use a javascript tool when I can stay only on
clojure. Having to generate tailwind css files via node puts the requirement that my users have node installed, which
is not a requirement.

I have to stop using the big 1-3 megabyte tailwind css files, as they are too big for mobile phone to load the
page quickly. I fighre that this huge css files are the biggest performance killer.

Many thanks for your great work! You spent a lot of time on doing the parsers so you can parse the tags
that are used.

What I am trying to o is the sort of other approahc. Generate the tags. But I think it is not too difficult.
Becaus ewhen you wrote the (I think instaparse rules), you know which combinatory combionaitons tailwind can
do.

So all I would have to give some parameters which liit the scope of all possible combinations.

MANY THANKS!!

[green-coder]

Girouette is a CLJC library, which means that it can run on the JVM and in browsers. In theory, you should be able to use it inside of your webapp to dynamically generate the CSS as you go, and feed the browser with the dynamic CSS stylesheets. Maybe that's what you need?

I will make a small demo about it in a couple of days. The related issue is #26