How to set up shadow-cljs from the scratch?
StyloCSS library is based on macro, so we need some alchemy to make it work in ClojureScript environment. We assume that the result will worth the effort.
- We create a shadowcljs template: lein new shadow-cljs shadow-example +reagent
Other available options of shadow-cljs are given here: https://github.com/shadow-cljs/lein-template
-
Add [stylo-css "0.1.0"] into dependencies.
-
Open up your shadow-cljs.edn configuration file and add :build-hooks [(stylo.shadow/reload {PATH-TO-CSS})] into the :app configuration. {PATH-TO-CSS} - is a path where the css file will be generated.
Our configuration should look like this: {... :builds {:app {... :build-hooks [(stylo.shadow/reload "public/out/stylo/css/stylo.css")]}}}
... - here and below dots mean that the other text of config is omitted due to readability issues
- Open public/index.html file, it is generated by shadow-cljs by default. We should add the new source of css into it.
Add the following into the section:
Our configuration should look like this:
... ...- So, you it is time to use the library.
Comprehensive documetation may be read by the link: github.com/stylo-css/docs
The basic syntax is the following:
[:div {:class (c [:pt 8] :h-screen)}]
- c - is our macro, it waits for classes alias as arguments
- :h-screen [:pt 8] - class alias
- when class needs some configuration - it is passed as a vector [:pt 8] - where :pt is class alias and 6 - it's value
Actually, stylo-css is tailwind-css on steroids. Tailwind-css would need pt-8 class, but what if we want to have 1 000 000 as a value? It is not predefined in tailwind, but it is easily implemented in stylo-css [:pt 1000000].