do the flow bite docs tell you to add anything to the tailwind config file? probably you need to tell tailwind where the flowbite source code is so tailwind can search for which classes are used.

They have this:

tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
      }
    },
    fontFamily: {
      'body': [
    'Inter', 
    'ui-sans-serif', 
    'system-ui', 
    '-apple-system', 
    'system-ui', 
    'Segoe UI', 
    'Roboto', 
    'Helvetica Neue', 
    'Arial', 
    'Noto Sans', 
    'sans-serif', 
    'Apple Color Emoji', 
    'Segoe UI Emoji', 
    'Segoe UI Symbol', 
    'Noto Color Emoji'
  ],
      'sans': [
    'Inter', 
    'ui-sans-serif', 
    'system-ui', 
    '-apple-system', 
    'system-ui', 
    'Segoe UI', 
    'Roboto', 
    'Helvetica Neue', 
    'Arial', 
    'Noto Sans', 
    'sans-serif', 
    'Apple Color Emoji', 
    'Segoe UI Emoji', 
    'Segoe UI Symbol', 
    'Noto Color Emoji'
  ]
    }
  }
}

Incidentally, I call the Flowbite.js here:

(defn page [ctx & body]
  (base
   ctx
   [:.flex-grow]
   [:.dark
    (when (bound? #'csrf/*anti-forgery-token*)
      {:hx-headers (cheshire/generate-string
                    {:x-csrf-token csrf/*anti-forgery-token*})})
    body
    [:script {:src ""}]]
   [:.flex-grow]
   [:.flex-grow]))

Interestingly, it all worked on a previous project, where the tailwind.config.js was:

module.exports = {
  darkMode: "media",
  content: [
    './src/**/*',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}
Adding the content: [
    './src/**/*',
  ],

At any rate, this is probably just something I have to fiddle with to resolve. Until I do, I can keep the tailwind cdn 'css js' file in the header (which Tailwind admonishes doing in production).

I think on this page you need to follow the instructions under "Require via NPM": https://flowbite.com/docs/getting-started/quickstart/ if you use flowbite from the cdn like you are then presumably you also have to use tailwind from the cdn, so that approach is mainly best just for trying it out.

if you install flowbite from npm, then you can include its source files easily in the tailwind config, and that will cause tailwind to include any classes that flowbite needs in the generated css file.

Ah, gotcha. Giving it a go now.

Hmmm... did npm install flowbite then modified the tailwind.config.js file (perhaps incorrectly):

module.exports = {
  darkMode: "media",
  content: [
    './src/**/*',
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('flowbite/plugin')
  ],
}

AND, now working...

apparently requiring the flowbite css before the main css resolves the issue. That may be in conjunction with the npm install etc I just did. I'll see if it's just the order in a fresh project tomorrow.

(defn base [{:keys [::recaptcha] :as ctx} & body]
  (apply
   biff/base-html
   (-> ctx
       (merge #:base{:title settings/app-name
                     :lang "en-US"
                     :icon "/img/glider.png"
                     :description (str settings/app-name " Description")
                     :image ""})
       (update :base/head (fn [head]
                            (concat [
                                     [:link {:href "", :rel "stylesheet"}]
                                     [:link {:rel "stylesheet" :href (css-path)}]
                                     [:script {:src (js-path)}]
                                     [:script {:src ""}]
                                     [:script {:src ""}]
                                     [:script {:src ""}]
                                     ;; works when I add this:
                                     ;; [:script {:src ""}]
                                     (when recaptcha
                                       [:script {:src ""
                                                 :async "async" :defer "defer"}])
                                     ]
                                    head))))
   body))

hmm, I think I'd expect to not need to include flowbite css when the tailwind config is set up right? the config you posted looks right to me. I've actually been planning to mess around with flowbite and it's surprisingly getting near the top of my todo list, so maybe I'll fiddle with it soon and post an example when I have it working.

Flowbite is incredible. Really good dev team. They are really responsive.

Flowbite html dropped into https://html2hiccup.dev/ works flawlessly.

looks like you need at least htmx v1.9.3 for that to work, and the biff starter app has 1.9.0 by default (see ui.clj)--maybe just need to update that?

As a side note, you could explore using something like [:div {:hx-get "/myendpoint" :hx-confirm "are you sure?"} "Click"] which does create an alert that checks to see if the user does want to perform the other htmx actions (:hx-get in this case). https://htmx.org/attributes/hx-confirm/

Yes, using latest htmx made the change. And I started indeed from the biff starter app, and was wondering why the documented :hx-on does not do anything. Hard to debug, as no obvious error message. I suggest to keep htmx version in biff starter app to "latest"

Do I maybe "miss" something somewhere about caching or similar ?

the (:biff/db ctx) value is a snapshot of the DB, so to query for newly submitted transactions you have to get a new snapshot. e.g. (q (xt/db (:biff.xtdb/node ctx)) ...)

(you do also have to call await-tx before getting a new snapshot, but biff/submit-tx does that for you)