Moved the files as in the screenshot and added css to dev.exs to look like this

config :app, AppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/app_web/(live|views)/.*(ex)$",
      ~r"lib/app_web/(live|views)/.*(css)$",
      ~r"lib/app_web/templates/.*(eex)$"
    ]
  ]

Along with this, refering to those CSS files from the assets folder by a bunch of relative double dots like this:

@import '../../../lib/app_web/live/components/liquidity_meeter.css';

It works, but does this make any sense as a project structure? Sure makes editing way easier with plain CSS instead of Tailwind.

Surface does…

https://surface-site.gigalixirapp.com/scoped_css

I did exactly that some months ago, but since I don’t have the time necessary to maintain it as a library, I never released it.