☂️ Complete the Tailwind v4 setup

Author: pikhosh

assets/css/app.css

@@ -1,3 +1,33 @@
+/* See the Tailwind configuration guide for advanced usage
+   https://tailwindcss.com/docs/configuration */
+
 @import "tailwindcss";
 
+@plugin "@tailwindcss/forms";
+@plugin "./tailwind_heroicons.js";
+
+@variant phx-click-loading ([".phx-click-loading&", ".phx-click-loading &"]);
+@variant phx-submit-loading ([".phx-submit-loading&", ".phx-submit-loading &"]);
+@variant phx-change-loading ([".phx-change-loading&", ".phx-change-loading &"]);
+
+@theme {
+    --color-brand: oklch(66.64% 0.2202 37.57)
+}
+
+/*
+ * Make LiveView wrapper divs transparent for layout.
+ * This makes it possible to use LiveViews as flex children for example.
+ */
+[data-phx-root-id] {
+    display: contents
+}
+
+/* Helper class for the default table component style that adds
+  * rounded corners to the table rows.
+  */
+@utility rounded-table-corner {
+    @apply first:before:absolute first:before:h-full first:before:w-4 first:before:top-0 first:before:-left-4 first:before:group-hover:bg-zinc-50 first:before:sm:rounded-l-xl last:before:absolute last:before:h-full last:before:w-4 last:before:top-0 last:before:-right-4 last:before:group-hover:bg-zinc-50 last:before:sm:rounded-r-xl;
+}
+
+
 /* This file is for your main application CSS */

assets/css/tailwind_heroicons.js

@@ -0,0 +1,46 @@
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs")
+const path = require("path")
+
+// Embeds Heroicons (https://heroicons.com) into your app.css bundle
+// See your `CoreComponents.icon/1` for more information.
+//
+module.exports = plugin(function ({ matchComponents, theme }) {
+    let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized")
+    let values = {}
+    let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+    ]
+    icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+            let name = path.basename(file, ".svg") + suffix
+            values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
+        })
+    })
+    matchComponents({
+        "hero": ({ name, fullPath }) => {
+            let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+            let size = theme("spacing.6")
+            if (name.endsWith("-mini")) {
+                size = theme("spacing.5")
+            } else if (name.endsWith("-micro")) {
+                size = theme("spacing.4")
+            }
+            return {
+                [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+                "-webkit-mask": `var(--hero-${name})`,
+                "mask": `var(--hero-${name})`,
+                "mask-repeat": "no-repeat",
+                "background-color": "currentColor",
+                "vertical-align": "middle",
+                "display": "inline-block",
+                "width": size,
+                "height": size
+            }
+        }
+    }, { values })
+})
+

assets/tailwind.config.js

@@ -46,7 +46,6 @@ config :tailwind,
   version: "4.0.9",
   logr: [
     args: ~w(
-      --config=assets/tailwind.config.js
       --input=assets/css/app.css
       --output=priv/static/assets/app.css
     ),

config/config.exs

@@ -581,7 +581,7 @@ defmodule LogrWeb.CoreComponents do
   width, height, and background color classes.
 
   Icons are extracted from the `deps/heroicons` directory and bundled within
-  your compiled app.css by the plugin in your `assets/tailwind.config.js`.
+  your compiled app.css by the plugin in your `assets/css/tailwind_heroicons.js`.
 
   ## Examples
 

lib/logr_web/components/core_components.ex

@@ -43,7 +43,7 @@ defmodule Logr.MixProject do
       {:floki, ">= 0.30.0", only: :test},
       {:phoenix_live_dashboard, "~> 0.8.3"},
       {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
-      {:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
+      {:tailwind, "~> 0.3.0", runtime: Mix.env() == :dev},
       {:heroicons,
        github: "tailwindlabs/heroicons",
        tag: "v2.1.1",