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.1.4"} ,,,}

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 "#"}]