How are you styling your ClojureScript apps?

Questions & Help General Questions
7

I’m using TailwindCSS with PostCSS. With some little tweakings, everything works smoothly.

Purge from hiccup

In order to purge according to your Clojure code, You can modify purge.options.defaultExtractor in tailwind.config.js to something like

/[^<>"'.`\s]*[^<>"'.`\s:]/g

Example tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: {
    content: ['./src/cljs/**/*.cljs',
              './test/cljs/**/*.cljs'],
    options: {
      defaultExtractor: content => content.match(/[^<>"'.`\s]*[^<>"'.`\s:]/g)
    }
  },
  variants: {},
  plugins: [
    require('@tailwindcss/forms')
  ],
  }
}

Call PostCSS in build hook

I have a postcss.clj which provide tasks for Shadow CLJS.

;; postcss.clj
(ns postcss
  (:require
   [babashka.process :as proc]))

(defn watch
  {:shadow.build/stage :configure}
  [build-state src dst]
  (proc/process ["./node_modules/.bin/postcss" src "-o" dst "--verbose" "-w"]
                {:env {"TAILWIND_MODE" "watch"}})
  build-state)

(defn release
  {:shadow.build/stage :configure}
  [build-state src dst]
  (proc/process ["./node_modules/.bin/postcss" src "-o" dst "--verbose"]
                {:env {"NODE_MODE" "production"}})
  build-state)

Use them in shadow-cljs.edn via build hooks.

:dev        {:build-hooks [(postcss/watch "src/css/app.css" "resources/public/css/app.css")]}
:release    {:build-hooks [(postcss/release "src/css/app.css" "resources/public/css/app.css")]}

Limitations

You can’t use CSS classes like w-1/3 in hiccup tag keyword, because the slash has special meaning. Use something like {:class ["w-1/3"]}

10 Likes