Tailwind JIT (Just In Time Engine) and Phoenix LiveView

Tailwind is creating one css file for your whole project. It doesn’t create separate bundles for every file.

The css file should also be really small even if you use it accross pages. You can read more about it here: Optimizing for Production - Tailwind CSS

There is a project, twind, that ships the compiler instead of the CSS and compiles on the fly.

This is not necessarily true, is pretty easy to split files, I do it for separate admin and main site css bundles (also do it with esbuild which is dramatically more impactful since js libs can make the bundle grow up very fast).

@Liam_or what tailwind JIT does is inspect your source files for tailwind classes and generate a css file on the fly, but this is during development only, when deploying you run tailwind minifying it and then deploy the css generated file.

Also, css files can’t be obscured, every major modern browser has introspection tools that allow you to see exactly which properties are being applied to any element in the page, if you want to restrict a logged out user of the animations you should handle this in the logic of your code, not in your css.

You mean there are workarounds?
Tailwind only produces one css file. So either you’re using multiple tailwind configs or you use esbuild to split the CSS (which I don’t know if it can?). Or I’m missing something else?

You’re right, multiple tailwind configs (and esbuild ones, where the admin loads everything all at once but the main bundle for the app load big dependencies on demand).

# config.exs
config :tailwind,
  version: "3.3.2",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ],
  admin: [
    args: ~w(
      --config=tailwind-admin.config.js
      --input=css/admin-app.css
      --output=../priv/static/assets/admin-app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ]

# dev.exs
  watchers: [
    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
    tailwind: {Tailwind, :install_and_run, [:admin, ~w(--watch)]}
  ]

# aliases in mix.exs
 "assets.deploy": [
        "tailwind default --minify",
        "tailwind admin --minify",
 ]

IIRC this is all that is needed.

Hello! Thanks so much for all your comments. I Really appreciate you sharing your knowledge on this

@thomas.fortes how do you conditionally serve those tailwind configs so that they are only served to either an admin or a default user? Could you also go into a little bit more detail about how you conditionally serve esbuild bundles? I would like to do a mini experiment with this approach in a LiveView app.

I would love for phoenix LiveView to one day have easy code splitting and bundle serving like how SveltKit uses vite to only serve JS and CSS when needed.

I don’t, I use different root layouts for the admin dashboard and the frontend and include the correct css in each layout, if I really had to serve different files to the same root layout I would probably use a Plug or on_mount to know if the user is an admin or a default user and serve it conditionally like any other conditional.

As for the esbuild, in config.exs:

config :esbuild,
  version: "0.18.0",
  default: [
    args: ~w(js/app.js js/video-player.js
      --chunk-names=chunks/[name]-[hash] --splitting --format=esm --bundle --target=es2017
      --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

You can see that I’m passing two files, app.js and video-player.js to the esbuild command, then in the video-player.js you can import your big deps normally and import it dynamically in a hook in the app.js file.

// app.js
Hooks.VideoPlayer = {
    mounted() {
        import("./video-player").then(
            ({ setupVideoPlayer }) => {
                setupVideoPlayer(this.el);
            }
        )
    }
}

This way the big video player dependency will be loaded only when you hit a page that uses the hook.

Awesome! Thanks @thomas.fortes, really appreciate you sharing your knowledge.