Sail is a pure-Clojure generation tool for creating Tailwind CSS classes. This includes the ability to only generate the classes that you use by analysing the source code in your project.
Include sail as a dependency in your project:
The preferred way using deps.edn:
io.github.juxt/sail {:git/tag "v0.8.15" :git/sha "e9653d3"}Previous methods of installation using clojars for project.clj/deps.edn:
[com.hypalynx/sail "0.8.15"]
{com.hypalynx/sail {:mvn/version "0.8.15"}}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" {:paths ["./src/cljs"]})
;; generates all tailwind classes once, used for production builds
(sail/build "styles.test.gen.css" {:paths ["./src/cljs"]})Write some frontend code using reagent:
(defn my-fancy-component-with-styles []
[:div.bg-red-400.text-red-900.px-4.py-2.rounded.shadow-lg "look at this big red button!"])
If you add dependencies, you must add them to both deps.edn and pom.xml.. ideally we generate the pom file to be honest but this works for now.
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