/tailwind-hiccup-tooling

Tooling for Hiccup supporting tailwind multi-line classes

Primary LanguageClojureEclipse Public License 1.0EPL-1.0

Clojars ProjectCircleCI

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

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