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 |
内联定义插件扩展 |
