Flowbite TailwindCSS with Elixir Phoenix

on October 29, 2022

This is a quick guide on setting up tailwindcss along with flowbite in an elixir phoenix application.

Step 1 — Install Elixir Tailwind Plugin

defp deps do
  [
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end
mix.exs

Step 2 — Configure Tailwind Plugin

To make tailwind processing work, we would want to take our tailwind.config.js and app.css and churn out the processed static css asset priv/static/assets/app.css.

 config :tailwind, version: "3.2.1", default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]
config/config.exs

Step 3 — Update deployment script

Whenever we would be running the assets.deploy phase in our CI/CD pipeline, we would want to minify our tailwindcss.

defp aliases do
  [
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]
]
mix.exs

Step 4 — Enable watcher for tailwind

watchers: [
  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]
dev.exs

Step 5.1 — Initialize tailwind.config.js

Now we need to finally create the tailwind.config.js file finally.

$ mix tailwind.install
terminal

Step 5.2 — Configure template paths

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
tailwind.config.js

Step 6 — Add the Tailwind directives

@tailwind base;
@tailwind components;
@tailwind utilities;
app.css

Step 7 — Install flowbite

$ cd assets
$ yarn add flowbite

Step 8 — Configure tailwind flowbite plugin

let plugin = require('tailwindcss/plugin')
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',  
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin'),
    plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
    plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
    plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
  ]
}
tailwind.config.js

Step 9 — Import flowbite js

Finally, to make certain functionalities which rely on flowbite’s javascript to work, we would have to import the flowbite.js file in our phoenix application…

import '../node_modules/flowbite/dist/flowbite.js';
...
assets/js/app.js

More about me

Elixir Releases for Prod Elixir Phoenix and Tailwindcss Custom Fonts