## 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.

### Steps to Add Tailwind

Let’s see how.

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

```elixir
    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).