Migrate to Tailwind v4

2025-02-28 20:06:39 +00:00
parent a218942110
commit d9e87d6c80
6 changed files with 88 additions and 109 deletions
@@ -1,5 +1,36 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@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 &);

-/* This file is for your main application CSS */
+@plugin "./heroicons.tailwind.plugin.js";
+@plugin "@tailwindcss/forms";
+
+@import "tailwindcss";
+
+@theme {
+  --color-brand: #d4af37;
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+
+  @keyframes shake {
+    10%,
+    90% {
+      transform: translate3d(-1px, 0, 0);
+    }
+    20%,
+    80% {
+      transform: translate3d(2px, 0, 0);
+    }
+    30%,
+    50%,
+    70% {
+      transform: translate3d(-4px, 0, 0);
+    }
+    40%,
+    60% {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
+}
@@ -0,0 +1,47 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = function ({ matchComponents, theme }) {
+  let iconsDir = path.join(process.cwd(), "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 },
+  );
+};