据我所知,Tailwind 记录的行为与其实际行为似乎存在脱节。
根据有关使用以下方法提取组件的文档@apply
:
..这样的类应该直接添加到@tailwind components 指令之后以避免特殊性问题。
在实践中,这会生成一个style.css
如下所示的主文件:
@tailwind base;
@tailwind components;
// Note: you could also just add a custom CSS file here.
.btn-blue {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
@apply bg-blue-700;
}
@tailwind utilities;
然而,实际上,这总是会引发构建错误,并且出于完全合乎逻辑的原因。utilities
Tailwind 使用从文件派生的类注入tailwind.config.js
文件。
CSS 是线性编译的,因此在导入并通读bg-blue-700
之前不存在通过 apply 进行引用。utilities
即使文档建议不要这样做,在解决编译错误之后移动组件类: utilities
@tailwind base;
@tailwind components;
@tailwind utilities;
// Note: you could also just add a custom CSS file here.
.btn-blue {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
@apply bg-blue-700;
}
不理想,但这对我有用。