SuperAPI AI 工具集

tailwindcss-custom-styles

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:在 Tailwind CSS 中编写自定义样式,包括创建命名工具类、条件与暗色模式变体、自定义变体选择器,以及内联工具类。

主要能力: @utility 创建工具类,例如 @utility glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); },用法为 class="glass-effect hover:glass-effect"。自 v4.3 起支持带默认值的功能型工具类,在 --value(…) / --modifier(…) 内使用 --default(…) 使裸工具类也可用,例如 @utility tab-* { tab-size: --value(integer, --default(4)); },class="tab" 得到 tab-size: 4,class="tab-2" 得到 tab-size: 2。

@variant 编写条件样式,例如 .card 中 @variant dark 与 @variant hover。自 v4.3 起支持堆叠与复合 @variant:@variant hover:focus 表示同时 hover 与 focus;@variant hover, focus 表示 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 组合样式。

适用场景:需要在 Tailwind CSS 项目中扩展自定义工具类、变体或组件样式时使用。

限制:资料未提供版本兼容范围之外的平台、计费或价格信息;具体项目结构与配置要求暂未提供。