Upgrade app to Tailwind CSS v4 and daisyUI v5

Author: Flo0807

assets/css/app.css

@@ -1,25 +1,42 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@layer base {
-
-  html,
-  body,
-  [data-phx-main] {
-    padding: 0;
-    margin: 0;
-    width: 100vw;
-    height: 100vh;
-    height: var(--app-height);
-  }
-
-  body>[data-phx-main]>footer {
-    position: sticky;
-    top: 100dvh;
-  }
-
-  :root {
-    --app-height: 100%;
-  }
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  themes: light, dark --default --prefersdark;
+}
+
+@plugin "daisyui/theme" {
+  name: "light";
+  --color-secondary: oklch(68.011% 0.158 276.934);
+  --color-primary: oklch(0.488 0.243 264.376);
+}
+
+@plugin "daisyui/theme" {
+  name: "dark";
+  --color-primary: oklch(68.5% 0.169 237.323);
+  --color-secondary: oklch(68.011% 0.158 276.934);
+}
+
+@plugin "../js/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 &"]);
+
+html,
+body,
+[data-phx-main] {
+  padding: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  height: var(--app-height);
+}
+
+body>[data-phx-main]>footer {
+  position: sticky;
+  top: 100dvh;
+}
+
+:root {
+  --app-height: 100%;
 }

assets/js/tailwind_heroicons.js

@@ -0,0 +1,43 @@
+const plugin = require('tailwindcss/plugin')
+const fs = require('fs')
+const path = require('path')
+
+module.exports = plugin(function ({ matchComponents, theme }) {
+  const iconsDir = path.join(__dirname, '../../deps/heroicons/optimized')
+  const values = {}
+  const icons = [
+    ['', '/24/outline'],
+    ['-solid', '/24/solid'],
+    ['-mini', '/20/solid'],
+    ['-micro', '/16/solid']
+  ]
+  icons.forEach(([suffix, dir]) => {
+    fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+      const 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, '')
+      content = encodeURIComponent(content)
+      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/package-lock.json

@@ -9,7 +9,7 @@
     "topbar": "^3.0.0"
   },
   "devDependencies": {
-    "daisyui": "4.12.24",
+    "daisyui": "^5.0.0",
     "standard": "^17.1.2"
   }
 }