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.
Top comments (0)