SuperAPI AI 工具集

tailwind-modern

前端与建站

查看项目

更新于 10-16 01:15

技能介绍

用途:在编写、审查或迁移 Tailwind/工具类样式代码时,默认产出 Tailwind v4 的语法、配置与自定义模式,避免 v3 时代的旧写法,除非仓库明确固定为 v3 且任务本身就是遗留兼容。

主要能力:默认采用 CSS 优先配置;用 @theme 中的设计令牌代替 tailwind.config.js 的 theme 扩展;用 @utility 代替旧的 custom utility 写法;偏好静态、可被检测的完整类名字符串;优先在标记中使用工具类而非自定义 CSS;克制使用任意值,把重复值提升为 @theme 令牌。工作流上会从 package.json、CSS 入口、PostCSS/Vite 配置和现有语法判断版本;若为 v4 或版本混合不清,则写 v4 语法;触碰主题/配置/自定义工具类时向 v4 规范化;在编辑 v4 代码时发现 v3 语法且安全则一并修正。

v4 要点:用 @import "tailwindcss"; 取代 @tailwind base/components/utilities;主题用 @theme 中的 CSS 变量(如 --font-display、--color-brand-500、--breakpoint-3xl);v4 自动扫描源文件,常规设置无需 content 数组,用 @source、@source not、@source inline() 处理例外与 safelist;用 @utility 定义自定义工具类,用 @variant 与 @custom-variant 在 CSS 中写变体;CSS 模块/Vue/Svelte/Astro 样式块中用 @reference 引用。构建侧推荐 @tailwindcss/vite、@tailwindcss/postcss 与 @tailwindcss/cli。

v3 到 v4 迁移要点:content/safelist/separator/corePlugins 属 v3 模式;theme() 为遗留写法,优先 var(--color-red-500);任意 CSS 变量语法改为 bg-(--brand-color);重要修饰符 ! 移到末尾;前缀按变体写在最前(prefix(tw)、tw:flex);变体堆叠改为从左到右;任意值中空格用下划线;hover: 仅在支持悬停的主输入设备生效;旧的 container 配置改用 @utility;注意一批默认值变化(border/divide 默认 currentColor、ring 默认 1px、按钮 cursor: default 等)及工具类改名(shadow、rounded、blur、outline-hidden、ring-3 等)和已废弃工具类(如 bg-opacity-、flex-shrink-)。

使用方式与限制:作为编码与审查规范使用,配合上述检测与规范化流程;命名空间按 --color-、--font-、--text-、--spacing-、--radius-* 等约定。类名必须静态可检测,禁止 bg-${color}-500 这类动态拼接。资料未提供安装命令、许可与收费信息。