Add Tailwind to Phoenix

README.md

Make all the changes described in these files. Delete assets/css/phoenix.css as it is no longer used.

• config/dev.exs
• assets/package.json
• assets/postcss.config.js
• assets/tailwind.config.js
• assets/css/app.css
• mix.exs

app.css

diff --git a/assets/css/app.css b/assets/css/app.css
index 24920cf..bbc55be 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,5 +1,7 @@
 /* This file is for your main application CSS */
-@import "./phoenix.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 /* Alerts and form errors used by phx.new */
 .alert {

dev.exs

diff --git a/config/dev.exs b/config/dev.exs
index 84b133f..4a8f334 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -25,7 +25,15 @@ config :journalr, JournalrWeb.Endpoint,
   secret_key_base: "7rIZl6WaY9+Ki7k06O2vp9Zfe7b1vuSmgHYSoKKDrDO4jVLM3m8sbo4kTW1tIKAm",
   watchers: [
     # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
-    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
+    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
+    npx: [
+      "tailwindcss",
+      "--input=css/app.css",
+      "--output=../priv/static/assets/app.css",
+      "--postcss",
+      "--watch",
+      cd: Path.expand("../assets", __DIR__)
+    ]
   ]
 
 # ## SSL Support

mix.exs

diff --git a/mix.exs b/mix.exs
index ceb6917..d34d81e 100644
--- a/mix.exs
+++ b/mix.exs
@@ -66,7 +66,7 @@ defmodule Journalr.MixProject do
       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
-      "assets.deploy": ["esbuild default --minify", "phx.digest"]
+      "assets.deploy": ["cmd --cd assets npm run deploy", "esbuild default --minify", "phx.digest"]
     ]
   end
 end

package.json

{
  "dependencies": {
    "tailwindcss": "^3.0.21"
  },
  "scripts": {
    "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
  }
}

postcss.config.js

{
  "dependencies": {
    "tailwindcss": "^3.0.21"
  },
  "scripts": {
    "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
  }
}

tailwind.config.js

module.exports = {
  mode: "jit",
  content: ["./js/**/*.js", "../lib/*_web/**/*.*ex"],
  theme: {
    extend: {
      colors: {
        yellow: {
          100: "#FFFDEE",
        },
        green: {
          100: "#EEFFEE",
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}