Yasin

Yasin

TailWind Css指令速查表

核心指令

@utility

创建自定义工具类,支持所有 Tailwind 变体(hover、focus、lg 等),像内置类一样使用。

@variant

创建固定的自定义变体修饰符,用于组合多个伪类或状态。

@custom-variant

创建带参数的动态变体修饰符,支持灵活的选择器配置。

@apply

在传统 CSS 类中应用 Tailwind 工具类,用于组合现有类创建组件样式。

@reference

引用其他 CSS 文件进行类名扫描,但不输出内容,实现按需生成。

@config

在 CSS 文件中指定 Tailwind 配置文件路径,覆盖默认配置。

@plugin

在 CSS 文件中内联定义 Tailwind 插件,无需单独的 JS 配置文件。


使用场景总结

指令 一句话概括
@utility 创建支持变体的自定义工具类
@variant 创建固定的自定义变体
@custom-variant 创建带参数的动态变体
@apply 在 CSS 中组合 Tailwind 类
@reference 引用但不输出,按需生成
@config 指定配置文件路径
@plugin 内联定义插件扩展