---
title: "Tailwind Standalone for Phoenix"
description: "Standalone Tailwind CSS library for Elixir"
---

# Tailwind Standalone for Phoenix

[Annie Ruygt](https://annieruygtillustration.com/)

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.

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