SuperAPI AI 工具集

tailwind-impl-plugins-custom

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:指导为 Tailwind CSS 编写自定义插件,添加工具类、组件类、基础样式或变体,并兼容 v3 与 v4。

主要能力与选型:项目为 v3 时只能用 JS plugin();仅 v4 且不需向后兼容时用 CSS 的 @utility 与 @custom-variant;v4 加载旧插件用 @plugin "./my-plugin.js";需同时支持 v3/v4 用 JS plugin();需调用方运行时配置用 plugin.withOptions(fn, configFn);只加设计令牌则直接用 @theme。

JS plugin() 提供 addUtilities(静态工具类,支持变体)、addComponents(多工具组件类,v4 下支持变体)、addBase(重置与元素选择器,不支持变体)、addVariant、matchUtilities、matchComponents、matchVariant,以及 theme()、config()、corePlugins()、e() 辅助函数。matchUtilities 必须提供 values 映射,否则静默生成零个类;任意值支持自动生效。

v4 原生写法:@utility 定义静态或函数式工具(函数式用 --value(--tab-size-*) 读取 @theme 令牌);@custom-variant 支持简写单选择器与含媒体查询、@slot 的块形式。

打包发布:package.json 中 tailwindcss 应放 peerDependencies 而非 dependencies,避免重复安装;v3 用户在 tailwind.config.js 的 plugins 中 require,v4 用户用 @plugin 引入,路径相对 CSS 文件解析。

限制与校验:theme() 路径缺失返回 undefined 而非报错,需用 ?? 兜底;addBase 输出不参与变体;插件类是否生效需在编译产物中检索选择器确认。资料未提供具体收费、价格与平台信息。