{"id":16002559,"url":"https://github.com/romboHQ/tailwindcss-motion","last_synced_at":"2025-10-21T07:31:14.622Z","repository":{"id":257807621,"uuid":"860621440","full_name":"romboHQ/tailwindcss-motion","owner":"romboHQ","description":"tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.","archived":false,"fork":false,"pushed_at":"2024-10-17T20:56:53.000Z","size":155,"stargazers_count":734,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-30T00:06:36.052Z","etag":null,"topics":["animate","animation","css","design","motion","preset","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://rombo.co/tailwind/","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/romboHQ.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":"2024-09-20T19:37:08.000Z","updated_at":"2024-10-29T19:34:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"2717fec9-ee12-4628-ac9d-4fbe6e00d5c7","html_url":"https://github.com/romboHQ/tailwindcss-motion","commit_stats":null,"previous_names":["rombohq/tailwindcss-motion"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romboHQ%2Ftailwindcss-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romboHQ%2Ftailwindcss-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romboHQ%2Ftailwindcss-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romboHQ%2Ftailwindcss-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romboHQ","download_url":"https://codeload.github.com/romboHQ/tailwindcss-motion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237448886,"owners_count":19311747,"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":["animate","animation","css","design","motion","preset","tailwindcss","tailwindcss-plugin"],"created_at":"2024-10-08T10:02:05.594Z","updated_at":"2025-10-21T07:31:14.617Z","avatar_url":"https://github.com/romboHQ.png","language":"JavaScript","readme":"# ✨ [tailwindcss-motion](https://rombo.co/tailwind/) ✨\n\n[![NPM Version](https://img.shields.io/npm/v/tailwindcss-motion?color=F3FC6F)](https://www.npmjs.com/package/tailwindcss-motion)\n[![NPM Downloads](https://img.shields.io/npm/dw/tailwindcss-motion?color=F3FC6F)](https://www.npmjs.com/package/tailwindcss-motion)\n\ntailwindcss-motion is a Tailwind CSS Plugin made at [RomboHQ](https://rombo.co/).\nIt’s a simple, yet powerful, animation library with a simple syntax.\n\n_Motion, without commotion._\n\n## ⚒️ Installation\n\n**1. Install npm package**\n\n```bash\nnpm i -D tailwindcss-motion\n```\n\n**2. Add into your tailwind.config.js**\n\n```js\n// tailwind.config.js\n\nexport default {\n     content: [...],\n     theme: {\n        extend: {...},\n     },\n     plugins: [require('tailwindcss-motion')],\n};\n```\n\n**or,** to use ESM:\n\n```js\nimport tailwindcssMotion from \"tailwindcss-motion\";\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n     content: [...],\n     theme: {\n          extend: {},\n     },\n     plugins: [tailwindcssMotion],\n};\n```\n\n## 📝 TypeScript Support\n\nThe plugin includes TypeScript definitions out of the box. Theme customizations and plugin configuration are fully typed:\n\n```ts\nimport type { Config } from \"tailwindcss\";\nimport motion from \"tailwindcss-motion\";\n\nconst config: Config = {\n  theme: {\n    extend: {\n      motionScale: {\n        \"200\": \"200%\",\n      },\n      motionTimingFunction: {\n        custom: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n      },\n    },\n  },\n  plugins: [motion],\n};\n```\n\n## How does it work?\n\nWe provide a simple syntax to animate any element in your Tailwind project. Instead of defining custom keyframes, we provide utility classes to animate every dimension, inline.\n\nFor example, for a slide and fade effect — you simply need `motion-translate-x-in-25 motion-opacity-in-0` or, you can use one of our presets with `motion-preset-fade`\n\n## Documentation\n\nFor full documentation, visit [docs.rombo.co/tailwind](https://docs.rombo.co/tailwind)\n\n## 🧩 Introducing the Chrome Extension\n\nTake your animations to the next level with the [Rombo Chrome Extension](https://rombo.co/extension/)!\n\nCreate animations visually:\n\n- Use our intuitive animator directly in your browser.\n- Loop animations\n- Save presets: Keep your animations organized and reusable.\n- Export options: Output animations as Tailwind classes, pure CSS, or Framer Motion code.\n\n![extension](https://github.com/user-attachments/assets/68a751f7-00a5-449e-a92d-f5499d3b9152)\n\n## Examples\n\nLanding page - https://play.tailwindcss.com/uAuVF8F1vC\n\n![example-1](https://github.com/user-attachments/assets/c847e7ee-f5b6-4620-afdc-2f8b037c36fd)\n\nChat dialog - https://play.tailwindcss.com/gjGqEKswjQ\n\n![example-2](https://github.com/user-attachments/assets/f11fbe59-7902-4d73-ab13-0e20ca7cc21b)\n\nLow Battery Dynamic Island - https://play.tailwindcss.com/tvYFbHtNNQ\n\n![example-3](https://github.com/user-attachments/assets/5f1e67d7-5f93-46d5-badb-ab1d3d526efc)\n\nApple Color Swatches - https://play.tailwindcss.com/cvQ3Nk3v8j\n\n![example-4](https://github.com/user-attachments/assets/887fba04-9642-4a4f-8ace-7375a4aa65b6)\n\nRombo Loop - https://play.tailwindcss.com/MLdegkb9Wq\n\n![example-5](https://github.com/user-attachments/assets/7138fb7a-d622-4590-92b5-6682806797e0)\n\nEmoji Animations - https://play.tailwindcss.com/86s55I4wmC\n\n![example-6](https://github.com/user-attachments/assets/3143dc8c-99c1-4df7-8709-a52b67d2824a)\n\n## What's Rombo?\n\nRombo is an early-stage company, building tools to help companies build beautiful interactive interfaces. We're starting out with a toolkit for engineers, designers and creative marketers to animate natively inside common Workflows — like Tailwind, Figma, Webflow, Shopify \u0026 more to come!\n\n## More Resources\n\n- [Bringing Motion to Tailwind CSS: Building an animation plugin at Rombo](https://www.kvin.me/posts/tailwind-motion) - Blog post about the creation of this library\n- [Animator Builder](https://rombo.co/tailwind/#animator) - Create animations intuitively and export them to Tailwind classes\n- [UnoCSS port](https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion) - Port created by [@whatnickcodes](https://github.com/whatnickcodes)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FromboHQ%2Ftailwindcss-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FromboHQ%2Ftailwindcss-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FromboHQ%2Ftailwindcss-motion/lists"}