playing with border gradients

packages/account-kit/dev/index.tsx

@@ -23,7 +23,7 @@ const accountKitConfig = {
   chain: mudFoundry,
   worldAddress: "0x6906906906906906906906906906906906906906",
   erc4337: false,
-};
+} as const;
 
 const root = ReactDOM.createRoot(document.querySelector("#react-root")!);
 root.render(

packages/account-kit/tailwind.config.cjs

@@ -1,11 +1,12 @@
 import { animate } from "./tailwindcss-plugins/animate";
+import { borderGradient } from "./tailwindcss-plugins/borderGradient";
 
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },
-  plugins: [animate],
+  plugins: [animate, borderGradient],
   darkMode: ["selector", ['[data-theme="dark"]']],
 };

packages/account-kit/tailwindcss-plugins/borderGradient.ts

@@ -0,0 +1,46 @@
+import plugin from "tailwindcss/plugin";
+
+export const borderGradient = plugin(function ({ addUtilities }) {
+  addUtilities({
+    "@property --tw-border-gradient-angle": {
+      syntax: "'<angle>'",
+      inherits: "true",
+      initialValue: "0deg",
+    },
+    "@property --tw-conic-gradient-angle": {
+      syntax: "'<angle>'",
+      inherits: "true",
+      initialValue: "0deg",
+    },
+    "@keyframes border-gradient": {
+      to: { "--tw-border-gradient-angle": "360deg" },
+    },
+    ".border-gradient": {
+      borderColor: "transparent",
+      background: `
+        padding-box linear-gradient(
+          var(--tw-gradient-from),
+          var(--tw-gradient-from)
+        ),
+        border-box conic-gradient(
+          from var(--tw-border-gradient-angle),
+          var(--tw-gradient-from),
+          var(--tw-gradient-to),
+          var(--tw-gradient-from)
+        )
+      `,
+      // background: `
+      //   padding-box linear-gradient(
+      //     var(--tw-gradient-from),
+      //     var(--tw-gradient-from)
+      //   ),
+      //   border-box linear-gradient(
+      //     var(--tw-border-gradient-angle),
+      //     var(--tw-gradient-from),
+      //     var(--tw-gradient-to)
+      //   )
+      // `,
+      animation: "border-gradient 2s linear infinite",
+    },
+  });
+});