Update the plugin to work with @Property

Author: alex-krasikau

src/app/globals.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@property --tw-gradient-from-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: red;
+}
+
+@property --tw-gradient-to-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: red;
+}

src/app/page.tsx

@@ -7,7 +7,7 @@ export default function Home() {
         <div>
           <h2 className="text-xl font-medium">Gradient on hover button</h2>
 
-          <button className="mt-4 rounded-lg bg-gray-900 px-6 py-2 text-white hover:bg-gradient-to-t hover:from-gray-900 hover:to-gray-600">
+          <button className="mt-4 rounded-lg bg-gray-900 px-6 py-2 text-white hover:bg-gradient-to-t hover:from-gray-900 hover:to-gray-500">
             Button
           </button>
         </div>
@@ -30,6 +30,16 @@ export default function Home() {
           </button>
         </div>
       </div>
+
+      <div className="mt-16 flex gap-x-16">
+        <div>
+          <h2 className="text-xl font-medium">Animated using @property</h2>
+
+          <button className="transition-gradient mt-4 rounded-lg bg-gradient-to-t px-6 py-2 text-white duration-500 ease-out from-gray-900 to-gray-900 hover:to-gray-500">
+            Button
+          </button>
+        </div>
+      </div>
     </main>
   );
 }

tailwind.config.ts

@@ -6,7 +6,13 @@ const config: Config = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {},
+  theme: {
+    extend: {
+      transitionProperty: {
+        gradient: "--tw-gradient-from-color, --tw-gradient-to-color",
+      },
+    },
+  },
   corePlugins: {
     gradientColorStops: false,
   },

tailwind/gradient.js

@@ -36,10 +36,12 @@ module.exports = plugin(
 
             return {
               "@defaults gradient-color-stops": {},
-              "--tw-gradient-from": `${toColorValue(
-                value,
-              )} var(--tw-gradient-from-position)`,
-              "--tw-gradient-to": `${transparentToValue} var(--tw-gradient-to-position)`,
+              "--tw-gradient-from-color": toColorValue(value),
+              "--tw-gradient-from":
+                "var(--tw-gradient-from-color) var(--tw-gradient-from-position)",
+              "--tw-gradient-to-color": transparentToValue,
+              "--tw-gradient-to":
+                "var(--tw-gradient-to-color) var(--tw-gradient-to-position)",
               "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to)`,
             };
           },
@@ -65,7 +67,9 @@ module.exports = plugin(
 
             return {
               "@defaults gradient-color-stops": {},
-              "--tw-gradient-to": `${transparentToValue}  var(--tw-gradient-to-position)`,
+              "--tw-gradient-to-color": transparentToValue,
+              "--tw-gradient-to":
+                "var(--tw-gradient-to-color) var(--tw-gradient-to-position)",
               "--tw-gradient-stops": `var(--tw-gradient-from), ${toColorValue(
                 value,
               )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
@@ -90,9 +94,9 @@ module.exports = plugin(
         {
           to: (value) => ({
             "@defaults gradient-color-stops": {},
-            "--tw-gradient-to": `${toColorValue(
-              value,
-            )} var(--tw-gradient-to-position)`,
+            "--tw-gradient-to-color": toColorValue(value),
+            "--tw-gradient-to":
+              "var(--tw-gradient-to-color) var(--tw-gradient-to-position)",
           }),
         },
         options,