Install Tailwind on Phoenix 1.6.0 without using Node or NPM

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:



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

Install or upgrade the new Phoenix Framework version



$ mix archive.install hex phx_new 1.6.0

Create a new project



$ 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):

Start the project



$ 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:



$ 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 🥳🎉🪅



$ 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:



<!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:



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

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



<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:



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

Blog