Tailwind Standalone for Phoenix · The Phoenix Files

Tailwind v3 Release

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.

Steps to Add Tailwind

Let’s see how.

1. First, add the dependency to your mix.exs file:

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

2. Next, define a default profile for Tailwind to use in your `config/config.exs` file:

```elixir
    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__)
      ]
    ```

3. Finally, add Tailwind to your endpoint `:watchers` configuration in `config/dev.exs` so that it runs in development when you start your Phoenix server:

```elixir
    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!

```bash
    mix phx.server
    ```

#### Output Example

[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 [here](https://tailwindcss.com/docs/utility-first).