Custom CSS replaces existing one instead of enhancing it. about clerk

[genmeblog]

Thank you, above solution sounds as a reasonable one. I think this is exactly what I need (inline CSS for a couple of custom classes). Need to try that still (be back soon with conclusions).

[genmeblog]

Works!

[mk]

Actually, replacing the full stylesheet is actually the intended usage. Clerk currently uses tailwind 3's play cdn. This is a javascript script that generates the used classes on-demand (using a mutation observer on the dom). This is primarily intended as a dev affordance.

When publishing in production, tailwind recommends to compile a custom stylesheet containing only the used classes. So we have this abstraction as a way for a user to override the stylesheet, compile it with a different tailwind config or user-appended styles (that can again include the viewer.css) but after going down that road we realized we don't want to be in the business of running a css pipeline for folks.

Also note that you can add inline styles using the html viewer like so:

^{:nextjournal.clerk/visibility :hide-ns}
(ns style-tag
  (:require [nextjournal.clerk :as clerk]))

^{::clerk/viewer :html ::clerk/visibility :hide}
[:style ".my-custom-class { color: blue; background-color: red; border-radius: 5px;}"]

(clerk/html [:div.my-custom-class.p-2 [:h1 "Hello 👋"]])

Please let me know if that works for you.