tailwind-hiccup-tooling

Getting started

Add tailwind-hiccup-tooling as a dependency, eg. for tools.deps projects

;; deps.edn
{:paths [,,,]
 :deps {,,, io.github.andrzejsliwa/tailwind-hiccup-tooling {:mvn/version "0.2.19"} ,,,}

Setting up the css build can be a little complex. See the [basic usage example][basic-example].

API

Inspired by tailwind-hiccup, this library provides a function tw that gives ability of writing multiline hiccup classes (well integrated with Tailwind CSS)

(require '[tailwind-hiccup-tooling.core :refer [tw]])

(defn MyLink
  [link-text]
  [:a.some-other-class
    (tw :group.block.max-w-xs.mx-auto.rounded-lg.p-6.bg-white
        :shadow-lg.space-y-3.hover:text-red
        {:on-click #(js/alert "surprise!")
         :class "hover:text-red"})
    link-text])

Additionally you can use symbol ! as tailwind /:

[:a.some-other-class (tw :bg-white.w-1!2)]
;; -> [:a.some-other-class {:class "bg-white w-1/2"}]

And <> as []:

[:a.some-other-class (tw :bg-white.w-<100px>)]
;; -> [:a.some-other-class {:class "bg-white w-[100px]"}]

You can use it also conditionally:

[:a.some-class (tht/tw :group.block
                       (when false :w-1!2)
                       (when true :p-<40px>)
                       {:href "#"})]
;; -> [:a.some-class {:class "group block p-[40px]", :href "#"}]