Tailwind

Mix tasks for installing and invoking the Tailwind CLI.

Think of it like esbuild but for Tailwind.

Installation

If you are going to build assets in production, then you add tailwind as dependency on all environments but only start it in dev:

def deps do
  [
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end

However, if your assets are precompiled during development, then it only needs to be a dev dependency:

def deps do
  [
    {:tailwind, "~> 0.1", only: :dev}
  ]
end

Now you can install tailwind by running:

$ mix tailwind.install

And invoke tailwind with:

$ mix tailwind default -i input.css -o output.css

The executable is kept at _build/tailwind-TARGET. Where TARGET is your system target architecture.

Profiles

The first argument to tailwind is the execution profile. You can define multiple execution profiles with the current directory, the OS environment, and default arguments to the tailwind task:

config :tailwind,
  default: [
    args: ~w(-i input.css -o output.css),
    cd: Path.expand("../assets", __DIR__)
  ]

When mix tailwind default is invoked, the task arguments will be appended to the ones configured above. Note profiles must be configured in your config/config.exs, as tailwind runs without starting your application (and therefore it won't pick settings in config/runtime.exs).

Adding to Phoenix

Installing tailwind in a Phoenix application is easy! Installation requires that Phoenix watchers can accept module-function-args tuples which is not built into Phoenix 1.5.9.

First add it as a dependency in your mix.exs:

def deps do
  [
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end

Then modify your config.exs file to have tailwind compile assets/css/app.css and compile to priv/static/assets:

config :tailwind,
  default: [
    args: ~w(-i ./css/app.css -o ../priv/static/assets/app.css --content ../lib/*_web/templates/**/*.html.heex),
    cd: Path.expand("../assets", __DIR__)
  ]

Make sure the "assets" directory from priv/static is listed in the :only option for Plug.Static in your lib/my_app_web/endpoint.ex

For development, we want to enable watch mode. So find the watchers configuration in your config/dev.exs and add:

  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}

Finally, back in your mix.exs, make sure you have a assets.deploy alias for deployments, which will also use the --minify option:

"assets.deploy": ["tailwind default --minify", "phx.digest"]

License

Copyright (c) 2021 Wannes Gennar. This project is inspired by, and uses source code of esbuild, make sure to check them out!