Murphy’s setup guide for a new Phoenix (1.5) project

What follows is an extremely concise list of steps I’m keeping around for reference when setting up a new Elixir / Phoenix project with Tailwind, Alpine, and user auth.

NOTE: Pretending the name of the app is “love_notes”

Generate it

mix love\_notes --live


in config/config.exs

config :love_notes, :generators,
  migration: true,
  binary_id: true,
  sample_binary_id: "11111111-1111-1111-1111-111111111111"

Setup Tailwind



cd assets
npm install tailwindcss @tailwindcss/forms postcss autoprefixer postcss-loader@4.2 --save-dev


In assets/postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},


In your config:

use: [
  'postcss-loader',// <-- add this

Tailwind Config

cd assets
npx tailwindcss init

Modify the config to add purge directories, set up the jit, enable dark mode, and add the tailwind UI plugin:

module.exports = {
  purge: [
  mode: 'jit',
  darkMode: 'media',
  theme: {
    extend: {},
  variants: {
    extend: {},
  plugins: [

Modify script in package.json

"deploy": "NODE_ENV=production webpack --mode production"

Include the CSS in the main file

in assets/css/app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

If you want to use component classes

You can do it like this.

@layer components {
  .btn-indigo {
    @apply bg-indigo-700 text-white font-bold py-2 px-4 rounded;

Adding Alpine JS

npm i alpinejs

In app.js :

import 'alpinejs'

// other stuff

let liveSocket = new LiveSocket("/live", Socket, {
  dom: { // <- Add this 'dom' section
    onBeforeElUpdated(from, to){
      if(from.__x){ window.Alpine.clone(from.__x, to) }
  params: {_csrf_token: csrfToken}

Adding Auth

Inside of mix.exs

      {:jason, "~> 1.0"},
      {:plug_cowboy, "~> 2.0"},
      # Add the following line 👇🏻
      {:phx_gen_auth, "~> 0.6", only: [:dev], runtime: false}

Get deps and run the generator:

mix deps.get
mix phx.gen.auth Accounts User users
mix deps.get # Do this again so that the deps added by the generator get fetched.

Leave a Reply

Your email address will not be published.