tailwindcss-motion

tailwindcss-motion 是 RomboHQ 开发的一个 Tailwind CSS 插件。它被描述为一个简单而强大的动画库，让开发者可以直接使用工具类为元素添加动画，而无需编写自定义关键帧。 安装方式是通过 npm 作为开发依赖进行安装，然后在 tailwind.config.js 的 plugins 数组中添加该插件。文档中同时展示了 CommonJS require 和 ESM import 两种引入方式。该包附带 TypeScript 定义，并且 motionScale 和 motionTimingFunction 等主题自定义项都有类型支持。 其核心理念是使用内联语法为各个维度添加动画。例如，滑动加淡入效果可以通过 motion-translate-x-in-25 和 motion-opacity-in-0 等类来实现，也可以使用 motion-preset-fade 这样的预设。完整文档托管在 docs.rombo.co/tailwind。 该插件还提供了一个配套的 Chrome 扩展，用于在浏览器中可视化地创建动画。它支持循环动画、保存可复用的预设，并将结果导出为 Tailwind 类、纯 CSS 或 Framer Motion 代码。 README 中链接了多个 Tailwind Play 在线演示，包括落地页、聊天对话框、低电量灵动岛、Apple 色板、Rombo 循环和表情符号动画。文中还提到 Rombo 是一家早期阶段的公司，专注于构建交互式界面工具，并列出了其他资源：一篇关于该插件创建过程的博客文章、一个动画构建器，以及一个社区 UnoCSS 移植版本。 该仓库仅包含所提供的 README 文本；材料中没有包含许可证、贡献指南、测试设置或基准数据。