Use Tailwind CSS classes in Clojure, batteries included.
I want to use tailwindcss in Clojure without involving extra dependencies e.g npm/node/javascript/postcss/autoprefixer, especially not when this can be done in Clojure.
A bit of background to those not familiar with tailwind:
tailwind is a utility first css framework that is a postcss plugin under the hood. It is intended to be used with autoprefixer (another postcss plugin) and purgecss.
sail makes the tools provided by tailwind available to Clojure projects as a library, without the you (the library user) having to depend on npm/node.
Sail is essentially a Clojure port of the Tailwind CSS workflow/build system I love to use.
Include sail as a dependency in your project:
[com.hypalynx/sail "0.8.1"]
{com.hypalynx/sail {:mvn/version "0.8.1"}}
Require it in a namespace, like dev.user:
(require '[sail.core :as sail]')
Include the following in your build sequence to get your css:
;; generates all tailwind classes to use in development and re-builds when changes occur
(sail/watch "target/public/styles.gen.css" {:path "./src/cljs"})
;; generates all tailwind classes once, used for production builds
(sail/build "styles.test.gen.css" {:path "./src/cljs"})
Originally I used array-maps to persist order and keep selectors/operators as maps but as they get bigger, grouping the array-maps revert to hash maps. Switching to vectors seemed the easier choice.
L600 in full default tailwind.css is where I consider base to end and components to begin, when .container is first defined.
It looks as though Safair only supports old flex syntax e.g -webkit-box. This means that multiple keys of the same name are required, where the most modern sits at the bottom.
display: -webkit-inline-box; display: inline-flex;
Sail aims to be 100% compliant with Tailwind CSS but there are some additional
classes added to make the library easier to use. For example classes with /
is them are not valid keywords when used directly so we have alternate tags in
addition to the originals e.g w-1/2 & w-1-2
make build
CLOJARS_USERNAME="x" CLOJARS_PASSWORD="y" clj -A:deploy
;; npm view normalize.css version == 8.0.1 ;; npm view tailwindcss version == 1.2.0
Can you improve this documentation? These fine people already did:
Mike Bruce & Michael BruceEdit on GitHub
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close