SuperAPI AI 工具集

tailwind-knowledge-patch

前端与建站

查看项目

更新于 10-16 01:35

技能介绍

用途:为 Tailwind CSS 项目的配置、迁移与扩展提供知识参考。建议先阅读迁移说明,再按需查阅对应主题。

主要能力与内容:

  • 配置与主题:@theme、令牌命名空间、源检测、旧版配置与自定义工具类。
  • 集成与生态:@reference、包别名、Vite、webpack、Tailwind Plus、Prettier。
  • 迁移与兼容:更名、移除的配置项、浏览器回退、逻辑属性迁移。
  • 工具类:渐变、遮罩、阴影、换行、对齐、逻辑属性、滚动条、容器。
  • 变体与状态:data 与祖先状态、负向变体、指针、校验、details、popover、CSS 变体组合。

必要用法(迁移要点):

  • 使用 CSS 优先入口:@import "tailwindcss"; 并在顶层 @theme 中定义令牌,例如 --color-brand、--breakpoint-3xl。仅写 :root 自定义属性不会生成工具类或变体。
  • 旧版 JS 配置与插件仅通过 @config 和 @plugin 桥接。
  • 不再支持 corePlugins、safelist、separator;safelist 改用 @source inline()。
  • 更名与弃用类:bg-gradient-to-r 改为 bg-linear-to-r;start-* 改为 inset-s-;end- 改为 inset-e-*。
  • 兼容行为:回退覆盖 oklab、带透明度的颜色以及阴影、变换、渐变使用的已注册自定义属性;显式渐变插值在不受支持时降级为浏览器默认,需在旧浏览器上测试视觉效果。

适用场景:Tailwind CSS 项目配置、从旧版本迁移、扩展主题与工具类、处理兼容性问题。 限制:以上为知识参考内容,具体项目行为与浏览器支持情况暂未提供更多细节,需以实际测试为准。