{"id":20908900,"url":"https://github.com/burnworks/tailwindcss-animation-delay","last_synced_at":"2025-10-17T09:52:20.724Z","repository":{"id":45721796,"uuid":"400504589","full_name":"burnworks/tailwindcss-animation-delay","owner":"burnworks","description":"Tailwind CSS plugin, add animation-delay CSS property","archived":false,"fork":false,"pushed_at":"2025-01-31T12:37:59.000Z","size":20,"stargazers_count":37,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T02:06:42.401Z","etag":null,"topics":["tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/burnworks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-27T12:39:14.000Z","updated_at":"2025-02-10T10:22:36.000Z","dependencies_parsed_at":"2022-08-31T11:21:44.721Z","dependency_job_id":"14fb4a97-19e2-4ff2-b024-7cf87d11d5ee","html_url":"https://github.com/burnworks/tailwindcss-animation-delay","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"26571db19419cef55d4b15bc7c5db08155f46f4d"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burnworks%2Ftailwindcss-animation-delay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burnworks%2Ftailwindcss-animation-delay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burnworks%2Ftailwindcss-animation-delay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burnworks%2Ftailwindcss-animation-delay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/burnworks","download_url":"https://codeload.github.com/burnworks/tailwindcss-animation-delay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwindcss","tailwindcss-plugin"],"created_at":"2024-11-18T14:09:19.584Z","updated_at":"2025-10-17T09:52:20.640Z","avatar_url":"https://github.com/burnworks.png","language":"JavaScript","readme":"# tailwindcss-animation-delay\n\nTailwind CSS plugin, add animation-delay CSS property.\n\n\u003e [!NOTE]\n\u003e With Tailwind CSS v4, you can now define custom properties directly in your CSS file without using any plugins.\n\u003e If you’re working with v4.0 or later, please include the contents of `tailwindcss-v4.css`.\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\n# Using npm\nnpm install tailwindcss-animation-delay\n\n# Using Yarn\nyarn add tailwindcss-animation-delay\n```\n\nThen add the plugin to your tailwind.config.js file:\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require(\"tailwindcss-animation-delay\"),\n    // ...\n  ],\n}\n```\n\n## Usage\n\n`animation-delay-{n}` class to specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.\n\n```html\n\u003csvg class=\"animate-bounce animation-delay-300 w-6 h-6 ...\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/svg\u003e\n```\n\n### Negative values\n\nTo use a negative animation-delay value, prefix the class name with a dash to convert it to a negative value.\n\n```html\n\u003csvg class=\"animate-bounce -animation-delay-600 w-6 h-6 ...\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/svg\u003e\n```\n\n\n| Class                | Properties               |\n| -------------------- | ------------------------ |\n| animation-delay-none | animation-delay: 0s;     |\n| animation-delay-75   | animation-delay: 75ms;   |\n| animation-delay-100  | animation-delay: 100ms;  |\n| animation-delay-150  | animation-delay: 150ms;  |\n| animation-delay-200  | animation-delay: 200ms;  |\n| animation-delay-300  | animation-delay: 300ms;  |\n| animation-delay-400  | animation-delay: 400ms;  |\n| animation-delay-500  | animation-delay: 500ms;  |\n| animation-delay-600  | animation-delay: 600ms;  |\n| animation-delay-700  | animation-delay: 700ms;  |\n| animation-delay-800  | animation-delay: 800ms;  |\n| animation-delay-900  | animation-delay: 900ms;  |\n| animation-delay-1000 | animation-delay: 1000ms; |\n| animation-delay-1100 | animation-delay: 1100ms; |\n| animation-delay-1200 | animation-delay: 1200ms; |\n| animation-delay-1300 | animation-delay: 1300ms; |\n| animation-delay-1400 | animation-delay: 1400ms; |\n| animation-delay-1500 | animation-delay: 1500ms; |\n| animation-delay-2000 | animation-delay: 2000ms; |\n| animation-delay-3000 | animation-delay: 3000ms; |\n| animation-delay-4000 | animation-delay: 4000ms; |\n| animation-delay-5000 | animation-delay: 5000ms; |\n| animation-delay-6000 | animation-delay: 6000ms; |\n| animation-delay-7000 | animation-delay: 7000ms; |\n| animation-delay-8000 | animation-delay: 8000ms; |\n| animation-delay-9000 | animation-delay: 9000ms; |\n| -animation-delay-75   | animation-delay: -75ms;   |\n| -animation-delay-100  | animation-delay: -100ms;  |\n| -animation-delay-150  | animation-delay: -150ms;  |\n| -animation-delay-200  | animation-delay: -200ms;  |\n| -animation-delay-300  | animation-delay: -300ms;  |\n| -animation-delay-400  | animation-delay: -400ms;  |\n| -animation-delay-500  | animation-delay: -500ms;  |\n| -animation-delay-600  | animation-delay: -600ms;  |\n| -animation-delay-700  | animation-delay: -700ms;  |\n| -animation-delay-800  | animation-delay: -800ms;  |\n| -animation-delay-900  | animation-delay: -900ms;  |\n| -animation-delay-1000 | animation-delay: -1000ms; |\n| -animation-delay-1100 | animation-delay: -1100ms; |\n| -animation-delay-1200 | animation-delay: -1200ms; |\n| -animation-delay-1300 | animation-delay: -1300ms; |\n| -animation-delay-1400 | animation-delay: -1400ms; |\n| -animation-delay-1500 | animation-delay: -1500ms; |\n| -animation-delay-2000 | animation-delay: -2000ms; |\n| -animation-delay-3000 | animation-delay: -3000ms; |\n| -animation-delay-4000 | animation-delay: -4000ms; |\n| -animation-delay-5000 | animation-delay: -5000ms; |\n| -animation-delay-6000 | animation-delay: -6000ms; |\n| -animation-delay-7000 | animation-delay: -7000ms; |\n| -animation-delay-8000 | animation-delay: -8000ms; |\n| -animation-delay-9000 | animation-delay: -9000ms; |\n\n## Configuration\n\nYou can configure which values and variants are generated by this plugin under the `animationDelay` key in your tailwind.config.js file:\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    animationDelay: {\n      100: \"100ms\",\n      200: \"200ms\",\n      300: \"300ms\",\n      400: \"400ms\",\n      \"-3000\": \"-3000ms\",\n      \"-7000\": \"-7000ms\",\n    },\n  },\n  variants: {\n    animationDelay: [\"focus\"],\n  },\n}\n```\n\n### Extending the default theme\n\nIf you’d like to preserve the default values for a theme option but also add new values, add your extensions under the `theme.extend` key in your configuration file.\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    extend: {\n      animationDelay: {\n        120: \"120ms\",\n        250: \"250ms\",\n        350: \"350ms\",\n        450: \"450ms\",\n        \"-3500\": \"-3500ms\",\n        \"-7500\": \"-7500ms\",\n      },\n    },\n  },\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburnworks%2Ftailwindcss-animation-delay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fburnworks%2Ftailwindcss-animation-delay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburnworks%2Ftailwindcss-animation-delay/lists"}