init package publish

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "pnpm",
+        "tailwindcss"
+    ]
+}

README.md

@@ -1,2 +1,128 @@
-# tailwindcss-animation-delay
-Tailwind CSS plugin, add animation-delay CSS property 
+# Tailwindcss `animation-delay` plugin
+
+Tailwind CSS plugin, add `animation-delay` CSS property.
+
+## Installation
+
+Install the plugin from npm:
+
+```sh
+# Using npm
+npm install tailwindcss-plugin-animation-delay
+
+# Using Yarn
+yarn add tailwindcss-plugin-animation-delay
+
+# Using pnpm
+pnpm install tailwindcss-plugin-animation-delay
+```
+
+Then add the plugin to your tailwind.config.js file:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require("tailwindcss-plugin-animation-delay"),
+    // ...
+  ],
+};
+```
+
+## Usage
+
+`animation-delay-{n}` or `-animation-delay-{n}` or `animation-delay-[arbitrary_values]` class to specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.
+
+```html
+<svg class="animate-bounce animation-delay-300 w-6 h-6 ...">
+  <!-- ... -->
+</svg>
+```
+### Normal
+
+| Class                | Properties               |
+| -------------------- | ------------------------ |
+| animation-delay-none | animation-delay: 0s;     |
+| animation-delay-25   | animation-delay: 25ms;   |
+| animation-delay-50   | animation-delay: 50ms;   |
+| 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; |
+
+### Negative
+
+| Class                 | Properties                |
+| --------------------- | ------------------------- |
+| -animation-delay-25   | animation-delay: -25ms;   |
+| -animation-delay-50   | animation-delay: -50ms;   |
+| -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
+
+You can configure which values and variants are generated by this plugin under the `animationDelay` key in your tailwind.config.js file:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    animationDelay: {
+      100: "100ms",
+      200: "200ms",
+      300: "300ms",
+      400: "400ms",
+    },
+  },
+  variants: {
+    animationDelay: ["responsive", "hover"],
+  },
+};
+```

index.js

@@ -0,0 +1,60 @@
+const plugin = require("tailwindcss/plugin");
+
+const animationDelay = plugin(
+  function ({ addUtilities, matchUtilities, theme, variants, e }) {
+    const values = theme("animationDelay");
+    const utilities = Object.entries(values).map(([key, value]) => {
+      return {
+        [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
+        [`.${e(`-animation-delay-${key}`)}`]: { animationDelay: `-${value}` },
+      };
+    });
+    matchUtilities(
+      {
+        "animation-delay": (value) => ({
+          animationDelay: value,
+        }),
+      },
+      { values: theme("animationDelay") }
+    );
+    addUtilities(utilities, variants("animationDelay"));
+  },
+  {
+    theme: {
+      animationDelay: {
+        none: "0s",
+        25: "25ms",
+        50: "50ms",
+        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",
+      },
+    },
+    variants: {
+      animationDelay: ["responsive", "hover"],
+    },
+  }
+);
+module.exports = animationDelay;

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "tailwindcss-plugin-animation-delay",
+  "version": "0.0.1",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/akbaruddin/tailwindcss-plugin-animation-delay.git"
+  },
+  "author": "akbaruddin <[email protected]>",
+  "license": "MIT",
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "tailwindcss-plugin",
+    "tailwindcss-animation-delay",
+    "animation-delay",
+    "animation",
+    "delay"
+  ],
+  "peerDependencies": {
+    "tailwindcss": ">=2.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Tailwind CSS plugin, add animation-delay CSS property",
+  "bugs": {
+    "url": "https://github.com/akbaruddin/tailwindcss-plugin-animation-delay/issues"
+  },
+  "homepage": "https://github.com/akbaruddin/tailwindcss-plugin-animation-delay#readme"
+}