Now supports negative values.

Author: burnworks

README.md

@@ -2,6 +2,9 @@
 
 Tailwind CSS plugin, add animation-delay CSS property.
 
+> [!NOTE]
+> Version 2.0.0 now supports negative values.
+
 ## Installation
 
 Install the plugin from npm:
@@ -67,6 +70,31 @@ module.exports = {
 | animation-delay-7000 | animation-delay: 7000ms; |
 | animation-delay-8000 | animation-delay: 8000ms; |
 | animation-delay-9000 | animation-delay: 9000ms; |
+| -animation-delay-75   | animation-delay: -75ms;   |
+| -animation-delay-100  | animation-delay: -100ms;  |
+| -animation-delay-150  | animation-delay: -150ms;  |
+| -animation-delay-200  | animation-delay: -200ms;  |
+| -animation-delay-300  | animation-delay: -300ms;  |
+| -animation-delay-400  | animation-delay: -400ms;  |
+| -animation-delay-500  | animation-delay: -500ms;  |
+| -animation-delay-600  | animation-delay: -600ms;  |
+| -animation-delay-700  | animation-delay: -700ms;  |
+| -animation-delay-800  | animation-delay: -800ms;  |
+| -animation-delay-900  | animation-delay: -900ms;  |
+| -animation-delay-1000 | animation-delay: -1000ms; |
+| -animation-delay-1100 | animation-delay: -1100ms; |
+| -animation-delay-1200 | animation-delay: -1200ms; |
+| -animation-delay-1300 | animation-delay: -1300ms; |
+| -animation-delay-1400 | animation-delay: -1400ms; |
+| -animation-delay-1500 | animation-delay: -1500ms; |
+| -animation-delay-2000 | animation-delay: -2000ms; |
+| -animation-delay-3000 | animation-delay: -3000ms; |
+| -animation-delay-4000 | animation-delay: -4000ms; |
+| -animation-delay-5000 | animation-delay: -5000ms; |
+| -animation-delay-6000 | animation-delay: -6000ms; |
+| -animation-delay-7000 | animation-delay: -7000ms; |
+| -animation-delay-8000 | animation-delay: -8000ms; |
+| -animation-delay-9000 | animation-delay: -9000ms; |
 
 ## Configuration
 
@@ -81,10 +109,12 @@ module.exports = {
       200: "200ms",
       300: "300ms",
       400: "400ms",
+      "-3000": "-3000ms",
+      "-7000": "-7000ms",
     },
   },
   variants: {
-    animationDelay: ["responsive", "hover"],
+    animationDelay: ["focus"],
   },
 }
 ```
@@ -103,6 +133,8 @@ module.exports = {
         250: "250ms",
         350: "350ms",
         450: "450ms",
+        "-3500": "-3500ms",
+        "-7500": "-7500ms",
       },
     },
   },

index.js

@@ -1,6 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
-const animationDelay = plugin(function ({ addUtilities, theme, e }) {
+const animationDelay = plugin(function ({ matchUtilities, theme, e }) {
     const defaultValues = {
         'none': '0s',
         75: '75ms',
@@ -28,16 +28,45 @@ const animationDelay = plugin(function ({ addUtilities, theme, e }) {
         7000: '7000ms',
         8000: '8000ms',
         9000: '9000ms',
+        '-75': '-75ms',
+        '-100': '-100ms',
+        '-150': '-150ms',
+        '-200': '-200ms',
+        '-300': '-300ms',
+        '-400': '-400ms',
+        '-500': '-500ms',
+        '-600': '-600ms',
+        '-700': '-700ms',
+        '-800': '-800ms',
+        '-900': '-900ms',
+        '-1000': '-1000ms',
+        '-1100': '-1100ms',
+        '-1200': '-1200ms',
+        '-1300': '-1300ms',
+        '-1400': '-1400ms',
+        '-1500': '-1500ms',
+        '-2000': '-2000ms',
+        '-3000': '-3000ms',
+        '-4000': '-4000ms',
+        '-5000': '-5000ms',
+        '-6000': '-6000ms',
+        '-7000': '-7000ms',
+        '-8000': '-8000ms',
+        '-9000': '-9000ms',
     };
 
     const userValues = theme('animationDelay');
     const values = { ...defaultValues, ...userValues };
 
-    const utilities = Object.entries(values).map(([key, value]) => ({
-        [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
-    }));
-
-    addUtilities(utilities);
+    matchUtilities({
+        'animation-delay': (value) => ({
+            animationDelay: value,
+        }),
+    }, {
+        values,
+        variants: ["responsive", "hover"],
+        supportsNegativeValues: true,
+    });
 });
 
-module.exports = animationDelay;
+module.exports = animationDelay;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tailwindcss-animation-delay",
-    "version": "1.2.0",
+    "version": "2.0.0",
     "description": "Tailwind CSS plugin, add animation-delay CSS property.",
     "main": "index.js",
     "license": "MIT",