Can you tell us what you’re doing that isn’t working?
This specific tailwind CDN is a kinda of JIT but in the web (you can see that it is a script, not a stylesheet), since it generates the css on the fly and live_redirects doesn’t reload the <head> and rerun the js the cdn probably is in some weird state, if you can install tailwind we can isolate the problem.
I did install tailwind based on this guide Install Tailwind CSS with Phoenix, then I installed Flowbite using npm i flowbite --prefix assets, add it to tailwind.config.js like this:
content: [
'./js/**/*.js',
'../lib/*_web.ex',
'../lib/*_web/**/*.*ex',
'./node_modules/flowbite/**/*.js'
],
then
plugins: [
require('@tailwindcss/forms'),
plugin(({ addVariant }) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
plugin(({ addVariant }) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
plugin(({ addVariant }) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
plugin(({ addVariant }) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
require('flowbite/plugin'),
]
and finally in app.js
import 'flowbite'
import "phoenix_html"
import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
import topbar from "../vendor/topbar"
This was my initial config, the flowbite components were working, but when I redirect to another LiveView they stop. I decided to use CDNs just for convenience as I had to spin up a sample project t test things out, and had to share a repo as you can see from above replies.
Hey all, the solution will be soon merged into Flowbite JS, see Support phoenix liveview by jmnda-dev · Pull Request #487 · themesberg/flowbite (github.com).
I’ve pasted my patch as a PR comment if you want to get going right now.
Cheers