SuperAPI AI 工具集

tailwind-plugin-craft

前端与建站

查看项目

更新于 10-16 03:39

技能介绍

用途:创建、架构或改进纯 CSS 的 Tailwind CSS v4 插件,目标是不使用 JavaScript,以“一个核心工具类 + 多个旋钮工具类”的方式实现可组合、可覆盖、开销低的视觉效果。

主要能力:围绕 @property 注册可动画自定义属性,用 @utility 定义核心工具类与旋钮工具类;支持感知均匀的渐变(OKLCH、color-mix、相对颜色)、多停靠点缓动渐变、mask-composite、滚动/视图时间线、容器查询、SVG 滤镜原语等;内置 RTL/逻辑属性、reduced-motion、forced-colors 与 @supports 回退等硬化要求。

使用方式:按阶段推进——先界定效果与公开 API,再研究 CSS 原语,随后在单元素上验证核心技巧,搭建可调工作台,迭代到工艺标准,最后烘焙数值并打包为 npm 插件。核心模式示例:@property --glow-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; },核心工具类读取属性渲染效果,旋钮工具类通过 --value() 设置属性。

适用场景:从零创建 Tailwind v4 工具插件或 CSS 效果;把已有效果从“尚可”提升到“出色”;将 CSS 效果打包为可安装、已硬化的 npm 插件。

限制:若效果确实需要运行时测量、指针跟踪或逐帧 JS 状态,则零 JS 约束不适用,应改用 JS 方案;若 Tailwind 自带工具类已能实现,则不应再封装。资料未提供具体收费、价格、平台与效果保证信息。