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 phx.new love\_notes --live
Use UUIDs
in config/config.exs
config :love_notes, :generators,
migration: true,
binary_id: true,
sample_binary_id: "11111111-1111-1111-1111-111111111111"
Setup Tailwind
from https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix
Install
cd assets
npm install tailwindcss @tailwindcss/forms postcss autoprefixer postcss-loader@4.2 --save-dev
Postcss
In assets/postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Webpack
In your config:
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',// <-- add this
'sass-loader'
]
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: [
'../lib/**/*.ex',
'../lib/**/*.leex',
'../lib/**/*.eex',
'./js/**/*.js'
],
mode: 'jit',
darkMode: 'media',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/forms')
],
}
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.
Top comments (1)
Thanks for sharing! Super helpful 🙃