@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;