<!-- LLM_VERSION_INFO
FORMAT: text/markdown
CONTENT_TYPE: article
ORIGINAL_URL: https://fly.io/phoenix-files/tailwind-standalone
ALTERNATE_VERSION: phoenix-files/tailwind-standalone/index.html (text/html)
EXTRACTION_DATE: 2026-04-18T22:17:10.543Z

This is the markdown version with text-only content (images converted to alt-text).
For rich formatting with images, request the HTML version at: phoenix-files/tailwind-standalone/index.html
-->

# Tailwind v3 Release

Tailwind v3 was [just released](https://tailwindcss.com/blog/tailwindcss-v3) 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](https://github.com/phoenixframework/tailwind) 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.

## Steps to Add Tailwind

### 1. Add Dependency
First, add the dependency to your `mix.exs` file:

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

### 2. Define Default Profile
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. Update Watchers Configuration
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
```

### Logs
```plaintext
[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).