Tailwind v3 was just released with some great new additions. One such feature is a new “standalone” tailwindcss CLI that includes pre-built binaries for all major platforms. This enables all of Tailwind’s great features without the dependency on node or npm being present on the user’s system!
The phx.new project generator will add Tailwind support in a future release, but adding Tailwind today takes just a few quick steps thanks to a new Tailwind elixir library that the Phoenix team just released. The library installs and runs the standalone client for your target system, just like the default esbuild support for new Phoenix projects.
Let’s see how.
First, add the dependency to your mix.exs file:
defp deps do
[
...,
{:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
]
end
Next, define a default profile for Tailwind to use in your config/config.exs file:
config :tailwind,
version: "3.0.7",
default: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
--output=../priv/static/assets/app.css
),
cd: Path.expand("../assets", __DIR__)
]
Finally, add Tailwind to your endpoint :watchers configuration in config/dev.exs so that it runs in development when you start your Phoenix server:
config :my_app, MyAppWeb.Endpoint,
...,
watchers: [
...,
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]
That’s it! Now boot your server and watch as Tailwind is downloaded and installed automatically!
mix phx.server
[info] Running MyAppWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.0.7/tailwindcss-macos-x64
[info] Access MyAppWeb.Endpoint at http://localhost:4000
Rebuilding...
Done in 482ms.
[debug] Live reload: priv/static/assets/app.css
Visit the Tailwind getting started guides to learn more about all that Tailwind has to offer https://tailwindcss.com/docs/utility-first