Add standalone tailwind

Dockerfile

@@ -44,6 +44,9 @@ RUN mix deps.compile
 
 COPY priv priv
 
+# Compile the release
+COPY lib lib
+
 # note: if your project uses a tool like https://purgecss.com/,
 # which customizes asset compilation based on what it finds in
 # your Elixir templates, you will need to move the asset compilation
@@ -53,9 +56,6 @@ COPY assets assets
 # compile assets
 RUN mix assets.deploy
 
-# Compile the release
-COPY lib lib
-
 RUN mix compile
 
 # Changes to config/runtime.exs don't require recompiling the code

assets/js/app.js

@@ -1,6 +1,5 @@
 import "phoenix_html"
 import {Socket} from "phoenix"
-// import {LiveSocket} from "./phoenix_live_view"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 

assets/tailwind.config.js

@@ -1,20 +1,15 @@
-const colors = require('tailwindcss/colors')
-
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
 module.exports = {
-  darkMode: 'media',
-  mode: 'jit',
-  purge: [
+  content: [
     './js/**/*.js',
     '../lib/*_web.ex',
     '../lib/*_web/**/*.*ex'
   ],
   theme: {
-    colors: colors
-  },
-  variants: {
     extend: {},
   },
   plugins: [
     require('@tailwindcss/forms')
-  ],
-}
+  ]
+}

config/config.exs

@@ -31,6 +31,17 @@ config :live_beats, LiveBeats.Mailer, adapter: Swoosh.Adapters.Local
 config :swoosh, :api_client, false
 
 # Configure esbuild (the version is required)
+config :tailwind,
+  version: "3.0.10",
+  default: [
+    args: ~w(
+      --config=tailwind.config.js
+      --input=css/app.css
+      --output=../priv/static/assets/app.css
+    ),
+    cd: Path.expand("../assets", __DIR__)
+  ]
+
 config :esbuild,
   version: "0.12.18",
   default: [

config/dev.exs

@@ -33,15 +33,8 @@ config :live_beats, LiveBeatsWeb.Endpoint,
   watchers: [
     # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
-    tailwindcss:
-      {LiveBeats.Tailwind, :run,
-       [
-         [
-           "--input=css/app.css",
-           "--output=../priv/static/assets/app.css",
-           "--watch"
-         ]
-       ]}
+    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
+
     # npx: [
     #    "tailwindcss",
     #    "--input=css/app.css",

config/prod.exs

@@ -14,7 +14,7 @@ config :live_beats, LiveBeatsWeb.Endpoint,
   cache_static_manifest: "priv/static/cache_manifest.json"
 
 # Do not print debug messages in production
-config :logger, level: :info
+config :logger, level: :debug
 
 # ## SSL Support
 #

lib/live_beats/tailwind.ex

@@ -1,13 +0,0 @@
-defmodule LiveBeats.Tailwind do
-  def run(args) do
-    opts = [
-      cd: IO.inspect(Path.join(File.cwd!(), "assets")),
-      into: IO.stream(:stdio, :line),
-      stderr_to_stdout: true
-    ]
-
-    Path.expand("assets/tailwindcss-macos-x64")
-    |> System.cmd(args, opts)
-    |> elem(1)
-  end
-end

lib/live_beats_web/live/player_live.ex

@@ -40,7 +40,7 @@ defmodule LiveBeatsWeb.PlayerLive do
         <%= if @profile do %>
           <.link
             navigate={profile_path(@profile)}
-            class="mx-auto flex outline border-2 border-white border-opacity-20 rounded-md p-1 pr-2"
+            class="mx-auto flex border-2 border-white border-opacity-20 rounded-md p-1 pr-2"
           >
             <span class="mt-1"><.icon name={:user_circle} class="w-4 h-4 block"/></span>
             <p class="ml-2"><%= @profile.username %></p>

mix.exs

@@ -39,7 +39,6 @@ defmodule LiveBeats.MixProject do
       {:postgrex, ">= 0.0.0"},
       {:phoenix_html, "~> 3.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      # {:phoenix_live_view, path: "~/oss/phoenix_live_view", override: true},
       {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", override: true},
       {:floki, ">= 0.30.0", only: :test},
       {:phoenix_live_dashboard, "~> 0.5"},
@@ -52,7 +51,8 @@ defmodule LiveBeats.MixProject do
       {:plug_cowboy, "~> 2.5"},
       {:mint, "~> 1.0"},
       {:heroicons, "~> 0.2.2"},
-      {:castore, "~> 0.1.13"}
+      {:castore, "~> 0.1.13"},
+      {:tailwind, "~> 0.1"}
     ]
   end
 
@@ -69,6 +69,7 @@ defmodule LiveBeats.MixProject do
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
       "assets.deploy": [
+        "tailwind default --minify",
         "esbuild default --minify",
         "phx.digest"
       ]

mix.lock

@@ -36,6 +36,7 @@
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "rustler": {:hex, :rustler, "0.22.2", "f92d6dba71bef6fe5f0d955649cb071127adc92f32a78890e8fa9939e59a1b41", [:mix], [{:jason, "~> 1.2", [hex: :jason, repo: "hexpm", optional: false]}, {:toml, "~> 0.5.2", [hex: :toml, repo: "hexpm", optional: false]}], "hexpm", "56b129141e86d60a2d670af9a2b55a9071e10933ef593034565af77e84655118"},
   "swoosh": {:hex, :swoosh, "1.5.0", "2be4cfc1be10f2203d1854c85b18d8c7be0321445a782efd53ef0b2b88f03ce4", [:mix], [{:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b53891359e3ddca263ece784051243de84c9244c421a0dee1bff1d52fc5ca420"},
+  "tailwind": {:hex, :tailwind, "0.1.3", "117ada41ee06343d77269ee5f5ef58ef93ddf4d596a0486db7be9d6157487f9e", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "1fe9ecb50ae521a328a787f22b60fb0e14d29c8d2a5983186962fdbd8162608a"},
   "telemetry": {:hex, :telemetry, "1.0.0", "0f453a102cdf13d506b7c0ab158324c337c41f1cc7548f0bc0e130bbf0ae9452", [:rebar3], [], "hexpm", "73bc09fa59b4a0284efb4624335583c528e07ec9ae76aca96ea0673850aec57a"},
   "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.1", "315d9163a1d4660aedc3fee73f33f1d355dcc76c5c3ab3d59e76e3edf80eef1f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7be9e0871c41732c233be71e4be11b96e56177bf15dde64a8ac9ce72ac9834c6"},
   "telemetry_poller": {:hex, :telemetry_poller, "1.0.0", "db91bb424e07f2bb6e73926fcafbfcbcb295f0193e0a00e825e589a0a47e8453", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b3a24eafd66c3f42da30fc3ca7dda1e9d546c12250a2d60d7b81d264fbec4f6e"},