[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73744":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},73744,"tailwindcss-motion","romboHQ\u002Ftailwindcss-motion","romboHQ","tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.","https:\u002F\u002Frombo.co\u002Ftailwind\u002F",null,"TypeScript",3302,38,7,33,0,1,56.87,"MIT License",false,"main",[23,24,25,26,27,28,29,30],"animate","animation","css","design","motion","preset","tailwindcss","tailwindcss-plugin","2026-06-12 04:01:11","# ✨ [tailwindcss-motion](https:\u002F\u002Frombo.co\u002Ftailwind\u002F) ✨\n\n[![NPM Version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Ftailwindcss-motion?color=F3FC6F)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwindcss-motion)\n[![NPM Downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdw\u002Ftailwindcss-motion?color=F3FC6F)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwindcss-motion)\n\ntailwindcss-motion is a Tailwind CSS Plugin made at [RomboHQ](https:\u002F\u002Frombo.co\u002F).\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\u002F\u002F 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\u002F** @type {import('tailwindcss').Config} *\u002F\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\u002Ftailwind](https:\u002F\u002Fdocs.rombo.co\u002Ftailwind)\n\n## 🧩 Introducing the Chrome Extension\n\nTake your animations to the next level with the [Rombo Chrome Extension](https:\u002F\u002Frombo.co\u002Fextension\u002F)!\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:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F68a751f7-00a5-449e-a92d-f5499d3b9152)\n\n## Examples\n\nLanding page - https:\u002F\u002Fplay.tailwindcss.com\u002FuAuVF8F1vC\n\n![example-1](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc847e7ee-f5b6-4620-afdc-2f8b037c36fd)\n\nChat dialog - https:\u002F\u002Fplay.tailwindcss.com\u002FgjGqEKswjQ\n\n![example-2](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff11fbe59-7902-4d73-ab13-0e20ca7cc21b)\n\nLow Battery Dynamic Island - https:\u002F\u002Fplay.tailwindcss.com\u002FtvYFbHtNNQ\n\n![example-3](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5f1e67d7-5f93-46d5-badb-ab1d3d526efc)\n\nApple Color Swatches - https:\u002F\u002Fplay.tailwindcss.com\u002FcvQ3Nk3v8j\n\n![example-4](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F887fba04-9642-4a4f-8ace-7375a4aa65b6)\n\nRombo Loop - https:\u002F\u002Fplay.tailwindcss.com\u002FMLdegkb9Wq\n\n![example-5](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F7138fb7a-d622-4590-92b5-6682806797e0)\n\nEmoji Animations - https:\u002F\u002Fplay.tailwindcss.com\u002F86s55I4wmC\n\n![example-6](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F3143dc8c-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 & more to come!\n\n## More Resources\n\n- [Bringing Motion to Tailwind CSS: Building an animation plugin at Rombo](https:\u002F\u002Fwww.kvin.me\u002Fposts\u002Ftailwind-motion) - Blog post about the creation of this library\n- [Animator Builder](https:\u002F\u002Frombo.co\u002Ftailwind\u002F#animator) - Create animations intuitively and export them to Tailwind classes\n- [UnoCSS port](https:\u002F\u002Fgithub.com\u002Fwhatnickcodes\u002Funocss-preset-tailwindcss-motion) - Port created by [@whatnickcodes](https:\u002F\u002Fgithub.com\u002Fwhatnickcodes)\n","tailwindcss-motion 是一个由 RomboHQ 开发的 Tailwind CSS 插件，它提供了一个简洁而强大的动画库，拥有易于使用的语法。其核心功能包括通过简单的类名来控制元素的动画效果，支持自定义动画预设，并且内置了 TypeScript 支持以确保类型安全。适用于需要在 Tailwind 项目中快速添加平滑过渡和复杂动画效果的各种场景，如网站的登录页、对话框或动态组件等。该插件简化了动画创建过程，使得开发者无需编写复杂的CSS代码即可实现丰富的视觉体验。",2,"2026-06-11 03:47:10","high_star"]