用途
该技能面向 Tailwind CSS 自定义样式编写，主要解决在 Tailwind v4 中扩展工具类、条件变体和 CSS 组织方式的问题。当需要创建新的命名工具类、编写条件/暗色模式变体、定义自定义变体选择器或使用 @apply 时适用。
主要能力
@utility：创建工具类
可定义命名工具类，例如 glass-effect 设置模糊与半透明背景，并可通过 hover:glass-effect 等方式使用。 自 v4.3 起支持函数式工具类默认值：在 --value(…) / --modifier(…) 中使用 --default(…)，使裸工具类也可生效。示例中 tab-* 通过 tab-size: --value(integer, --default(4)) 让 class="tab" 得到 tab-size: 4，class="tab-2" 得到 tab-size: 2。
@variant：条件样式
可在普通 CSS 规则内嵌套条件样式，例如在 .card 中通过 @variant dark 设置暗色背景，通过 @variant hover 设置缩放。 自 v4.3 起支持堆叠与复合写法：@variant hover:focus 表示同时满足悬停和聚焦；@variant hover, focus 表示悬停或聚焦共用同一代码块。
@custom-variant：自定义变体
可定义新的变体选择器，例如 @custom-variant theme-midnight (&:where([data-theme="midnight"] *));，之后可用 theme-midnight:bg-black 应用。
@apply：内联工具类
在自定义类中内联现有工具类，例如 .btn-primary 使用 @apply bg-blue-500 text-white px-4 py-2 rounded-lg。
@layer：CSS 组织
通过 @layer components 等对自定义组件样式进行分层组织，例如 .card 使用 @apply 组合背景、阴影、圆角和内边距。
使用方式
资料以代码示例展示各指令写法：定义 @utility 后通过类名调用；在规则内使用 @variant 包裹条件声明；用 @custom-variant 注册变体后以“变体:工具类”形式使用；用 @apply 在自定义选择器中复用工具类；用 @layer 包裹组件样式。未提供安装命令、配置文件或完整项目接入步骤。
适用场景
适合需要在 Tailwind CSS 项目中封装可复用样式（如玻璃拟态效果）、按状态或主题切换样式、基于数据属性创建主题变体、以及以组件类方式组织样式的开发工作。
限制
资料仅覆盖上述指令的语法示例，未说明版本兼容范围（除标注 v4.3 的两项）、浏览器支持、构建配置要求、性能影响或调试方法。部分功能依赖 Tailwind CSS v4 及 v4.3，具体适用条件暂未提供。