SuperAPI AI 工具集

organizing-classnames

前端与建站

查看项目

更新于 10-15 22:17

技能介绍

用途:在编写或审查 React 组件时,强制统一 classNames 包的使用模式与 Tailwind CSS 类名排序约定。

主要能力:规定从 'classnames' 导入 classNames;className 属性须为可选(className?: string);消费者传入的 className 始终放在最后合并以便覆盖默认样式。断点按移动优先排序:base → xs: → s: → sm: → md: → m: → lg: → xl: → 2xl:,实际名称需查看项目 tailwind.config。类名按断点分组,每个断点单独作为一个字符串参数;组内工具类按布局 → 间距 → 排版 → 颜色 → 效果排序;最后一个参数后不加尾逗号。

使用方式:基础写法为 className={classNames('base-style', 'sm:sm-style', 'md:md-style')}。条件类可用对象语法,如 { 'px-3 py-2 text-sm-medium': size === ButtonSize.SMALL }。子元素可暴露独立 className 属性(如 headerClassName、contentClassName)。仅使用一次的响应式类集保持内联,不因跨多行或含断点而提取变量;仅当类集被引用多次时才提取为变量,组件内共享的变量定义在组件内部靠近使用处,跨组件或文件级共享才提升到模块作用域并用常量命名。

适用场景:React 组件开发与代码审查,尤其是使用 Tailwind CSS 与 classnames 的项目。

限制:断点名称以项目 tailwind.config 为准,可能与示例不同;资料未提供安装命令、版本要求或性能数据。