Install Tailwind on Phoenix 1.6.0 without using Node or NPM
Tags: elixir, tailwindcss, phoenix
Published: 2022-02-27 00:38:25

Well, that’s not entirely true 😄 you will need to have Node.js installed on your system at least.
I’m loving this new version of Phoenix Framework. One of the features I like the most is the switching to `esbuild` and stop using `webpack`. For a lot of reasons that you surely already know 😉.

## Disclaimer

I don’t have much experience with Tailwind so maybe there can be some improvements to what I did 🤷‍♂️. So any comments to improve this are welcome so we can improve this solution and help others too 🤟🦾.


## Install Elixir v 1.12

The first mandatory condition is to have Elixir 1.12 installed first. I usually do it using `asdf`:

```sh
$ asdf install erlang 24.0.1
$ asdf install elixir 1.12.3-otp-24
```

## Install or upgrade the new Phoenix Framework version

```sh
$ mix archive.install hex phx_new 1.6.0
```

## Create a new project

```sh
$ mix phx.new example
```

install deps and create your database…
If you analize 🧐 your `assets` folder you’ll see there’s no `package.json` included 🤩. Also, in your `config/dev.exs` you will see that `esbuild` replaced `webpack` (line 26):

![image](https://miro.medium.com/max/933/1*0j5HmahSsWJbiVrZJQVe2Q.png)


## Start the project

```sh
$ iex -S mix phx.server
```

Did you see how fast? 🤯😱.
Now, let’s install Tailwind 😏.

## Remove initial CSS config

Delete the `assets/css/phoenix.css` file.
Then, go to your `assets/css/app.css` file and delete everything inside.
__Don’t delete the file.__
Now your project’s design is destroyed 🙂.


## Install Tailwind

_Tailwind CSS requires Node.js 12.13.0 or higher,_ so make sure you have it installed first as I said first.

I will use the guides from the Tailwind’s official documentation and refer them here.
Use `npx` which is a tool that is automatically installed alongside `npm` to generate a fully compiled Tailwind CSS file:

```sh
$ npx tailwindcss init — postcss
$ npx tailwindcss -o tailwind.css
```

This will create a file called `tailwind.css` generated based on Tailwind’s default configuration, and automatically add any necessary vendor prefixes using `autoprefixer`.


### Say congrats to you because you have Tailwind installed 🥳🎉🪅

```sh
$ congrats to me
zsh: command not found: congrats
```

🤔🤔🤔🤔🤔🤔🤔

By this point you can stop the tutorial because everything is done!!! But if you want some more little fixes let’s continue.

## Fix your homepage

Go to your `lib/example/templates/layout/root.html.heex` file and leave it like this:

```html
<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”utf-8"/>
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”/>
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0"/>
        <%= csrf_meta_tag() %>
        <%= live_title_tag assigns[:page_title] || “Example”, suffix: “ · Phoenix Framework” %>
        <link phx-track-static rel=”stylesheet” href={Routes.static_path(@conn, “/assets/app.css”)}/>
        <script defer phx-track-static type=”text/javascript” src={Routes.static_path(@conn, “/assets/app.js”)}></script>
    </head>
    <body>
        <%= @inner_content %>
    </body>
</html>
```

Go to your `lib/example_web/templates/layout/live.html.heex` file and leave it like this:

```html
<main>
 <%= @inner_content %>
</main>
```

Go to `lib/example_web/templates/layout/app.html.heex` and leave it like this:

```html
<main>
 <p class=”alert alert-info” role=”alert”><%= get_flash(@conn, :info) %></p>
 <p class=”alert alert-danger” role=”alert”><%= get_flash(@conn, :error) %></p>
 <%= @inner_content %>
</main>
```

Go to your `lib/example_web/templates/page/index.html.heex` file and leave it like this:

```html
<div class=”container mx-auto h-screen”>
 <div class=”text-center px-3 lg:px-0">
 <h1 class=”my-4 text-2xl md:text-3xl lg:text-5xl font-black leading-tight”>
 This is Phoenix with Tailwind CSS 👋
 </h1>
 <p
 class=”leading-normal text-gray-800 text-base md:text-xl lg:text-2xl mb-8"
 >
 And you are a human from planet Earth 🌍
 </p>
 </div>
</div>
```

## Relax and enjoy this new version of Phoenix Framework

By this point, you will see that you don’t have any NPM included or `package.json` or `node_modules`. Nothing against NPM, BTW 😂. NPM and Node have given me food for various years for free. So thanks to them too.

## Enjoy life, baby 🏝️