跳转到正文

@source 指令

@source 位于输入 CSS 中。它的 inline() 形式会添加或移除类名候选项,并且在任何位置都有效。路径形式则指定要扫描类名的模板文件;只有 CLI 会扫描文件,但目前还不会应用你提供的路径(见 路径的用途)。

CSS
@import "tailwindcss";
@source "./templates";

@source 指令会在编译期间读取,并从输出中移除——不会出现在生成的 CSS 中。路径必须加引号,单引号和双引号均可。

路径、glob 和排除

路径形式接受目录、glob 或排除路径,并且这些指令会累积生效:

CSS
@source "./templates";              /* a directory */
@source "./components/**/*.php";    /* a glob */
@source not "./templates/legacy";   /* an exclusion */

路径的用途

编译器会将每条路径指令记录到 TailwindPHP\compile() 返回的数组中的 sources 列表里,作为 ['base' => …, 'pattern' => …, 'negated' => …],其中 base 取自 base 编译选项。编译器本身不会读取文件。

  • tw::generate()、tw::compile() 和 TailwindCompiler 只会编译你传入的内容。路径指令在这些形式中不起作用。
  • CLI 会读取 sources,但在当前版本中,它会递归扫描输入文件所在目录下所有未排除路径的文件,无论路径或 glob 如何指定;而 not 路径会被完全忽略,因此不会排除任何内容(#8)。《扫描哪些内容》CLI详细说明了现状,并提供了当前可用的目录布局。

内联候选项

@source inline(...) 会强制将类名加入输出,即使它们从未出现在扫描的文件中——适用于运行时动态拼接的类名:

CSS
@source inline("flex p-4 m-2");

内联候选项也支持变体:

CSS
@source inline("hover:bg-blue-500 focus:ring-2");

花括号展开

内联模式会展开花括号组,因此你可以用紧凑的写法列出许多候选项:

CSS
@source inline("p-{1,2,4}");
/* Generates p-1, p-2, and p-4 */

@source inline("text-{red,blue}-500");
/* Generates text-red-500 and text-blue-500 */

忽略内联候选项

@source not inline(...) 的作用与 inline() 相反——即使匹配的候选项已在内容中找到,也会将其从输出中移除。这里同样支持花括号展开:

CSS
@source not inline("legacy");
@source not inline("p-{1,2}");

验证规则

@source 是一条语句,而不是一个块。编译器会拒绝以下写法:

  • 带有主体的指令 — @source cannot have a body.
  • 嵌套指令(例如位于 @media 内)— @source cannot be nested.
  • 未加引号的路径 — @source paths must be quoted.
CSS
/* Invalid — throws "`@source` cannot have a body." */
@source "./src" {
    .some-style { color: red; }
}

/* Invalid — throws "`@source` paths must be quoted." */
@source ./src;

文件构建请参阅 CLI;有关解析 @import 和虚拟模块,请参阅 导入。