{"id":16434923,"url":"https://github.com/dumptyd/tailwind-animatecss","last_synced_at":"2025-10-08T06:49:12.736Z","repository":{"id":65514119,"uuid":"442334561","full_name":"dumptyd/tailwind-animatecss","owner":"dumptyd","description":"animate.css as a Tailwind plugin","archived":false,"fork":false,"pushed_at":"2022-01-01T16:18:49.000Z","size":128,"stargazers_count":64,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-10T13:08:09.050Z","etag":null,"topics":["animatecss","animation","animation-css","plugin","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://dumptyd.github.io/tailwind-animatecss/","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/dumptyd.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}},"created_at":"2021-12-28T03:09:13.000Z","updated_at":"2024-08-13T16:39:01.000Z","dependencies_parsed_at":"2023-01-26T21:16:09.623Z","dependency_job_id":null,"html_url":"https://github.com/dumptyd/tailwind-animatecss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dumptyd%2Ftailwind-animatecss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dumptyd%2Ftailwind-animatecss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dumptyd%2Ftailwind-animatecss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dumptyd%2Ftailwind-animatecss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dumptyd","download_url":"https://codeload.github.com/dumptyd/tailwind-animatecss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221666419,"owners_count":16860415,"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":["animatecss","animation","animation-css","plugin","tailwind","tailwindcss"],"created_at":"2024-10-11T08:50:30.858Z","updated_at":"2025-10-08T06:49:07.718Z","avatar_url":"https://github.com/dumptyd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwind-animatecss\n\nUse animate.css as a Tailwind 3 plugin.\n\n**Demo** \u0026ndash; https://dumptyd.github.io/tailwind-animatecss\n\n### Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Advanced](#advanced)\n  - [Changing the prefix](#changing-the-prefix)\n  - [How this plugin differs from other implementations](#how-this-plugin-differs-from-other-implementations)\n\n### Installation\n\n```sh\nyarn add tailwind-animatecss animate.css\n# OR\nnpm install tailwind-animatecss animate.css\n```\n\nSpecify the plugin in `tailwind.config.js`\n\n```js\nmodule.exports = {\n  // ...\n  plugins: [\n    require('tailwind-animatecss')\n  ],\n  // ...\n};\n```\n\n### Usage\n\nAnimations can be applied using `animatecss` prefixed classes:\n\n```html\n\u003ch1 class=\"animatecss animatecss-bounce\"\u003eBouncy!\u003c/h1\u003e\n\u003ch1 class=\"animatecss animatecss-slideInDown\"\u003eSliding in\u003c/h1\u003e\n\u003ch1 class=\"animatecss animatecss-jackInTheBox\"\u003eJack in the box\u003c/h1\u003e\n```\n\n---\n\nAll animate.css classes are modified to use the `animatecss` class name and prefix to avoid conflicts with Tailwind's animations. The table below should give you an idea of how the classes are mapped to the prefix.\n\n| animate.css | tailwind-animatecss |\n| - | - |\n| `animate__animated` | `animatecss` |\n| `animate__fadeIn` | `animatecss-fadeIn` |\n| `animate__infinite` | `animatecss-infinite` |\n| `animate__repeat-2` | `animatecss-repeat-2` |\n| `animate__delay-2s` | `animatecss-delay-2s` |\n| `animate__fast` | `animatecss-fast` |\n| | ... and so on |\n\n### Advanced\n\n#### Changing the prefix\n\nBy default, `animatecss` is used as the base class name and prefix for classes. This can be changed by specifying the `theme.animatecss.prefix` option in `tailwind.config.js`.\n\n```js\nmodule.exports = {\n  // ...\n  theme: {\n    animatecss: {\n      prefix: 'custom-animation'\n    }\n  }\n  // ...\n};\n// class names will now be available under\n// `custom-animation`, `custom-animation-bounce`, `custom-animation-infinite` and so on.\n```\n\n#### How this plugin differs from other implementations\n\nUnlike other projects, this plugin doesn't implement the animations through a rewrite of the animate.css utilities.\n\nInstead, classes, keyframes and styles are read from your installed version of animate.css at compile time and these are registered with Tailwind so the animations can be used with purging support, IntelliSense and other Tailwind goodness.\n\n### Contributing\n\nhttps://github.com/dumptyd/tailwind-animatecss/issues\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdumptyd%2Ftailwind-animatecss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdumptyd%2Ftailwind-animatecss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdumptyd%2Ftailwind-animatecss/lists"}