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 😉.
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 🤟🦾.
The first mandatory condition is to have Elixir 1.12 installed first. I usually do it using
$ asdf install erlang 24.0.1 $ asdf install elixir 1.12.3-otp-24
$ mix archive.install hex phx_new 1.6.0
$ 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
webpack (line 26):
$ iex -S mix phx.server
Did you see how fast? 🤯😱.
Now, let’s install Tailwind 😏.
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 🙂.
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.
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
$ 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.
Go to your
lib/example/templates/layout/root.html.heex file and leave it like this:
Go to your
lib/example_web/templates/layout/live.html.heex file and leave it like this:
<main> <%= @inner_content %> </main>
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>
By this point, you will see that you don’t have any NPM included or
node_modules. Nothing against NPM, BTW 😂. NPM and Node have given me food for various years for free. So thanks to them too.