Tailwind

[TrevorHinesley]

I noticed in dev.exs that there's some config related to Tailwind, but using a pretty standard Phoenix 1.7 setup (with pretty much a default tailwind setup), I can't seem to get LiveAdmin to allow me to leverage Tailwind classes. Is there a simple way to do this?

[tfwright]

Yes, LiveAdmin uses Tailwind internally in order to generate the css that is actually distributed in the lib, but is agnostic about how any override CSS is produced. I could see how it's a bit confusing that that piece is part of the dev app which otherwise serves as a demo. What you would need to do is configure your own app to use Tailwind, and then feed it your "pre compiled" CSS, and point LiveAdmin to the output. I will see if I can make some adjustments to the dev app to serve as an example of how this might be accomplished.

[TrevorHinesley]

Ahh ok, thanks a ton. That'd be really helpful.

[tfwright]

Fully extracting the LiveAdmin config from the demo app config is proving more complicated than I thought (probably more than it's worth tbh), but I was able to confirm that you can pass multiple watchers to the Phoenix endpoint config. So, assuming you have the tailwindcss utility installed you could basically copy what the demo app is currently doing into a new entry in the list:

live_admin/dev.exs

Lines 26 to 33 in d1655bb

	npx: [
	"tailwindcss",
	"--input=css/app.css",
	"--output=../dist/css/app.css",
	"--postcss",
	"--watch",
	cd: "assets"
	]

And then this LiveAdmin config should work: config :live_admin, css_overrides: __DIR__ |> Path.join(path_to_your_output) |> File.read!()