tailwind-css - 如何确定 Tailwind Css 的范围

Question

将顺风 CSS 包含在我不希望它全局应用的系统中时，我找不到一个很好的方法来确定适用于自定义构建选项的范围。
基本上我想这样做:

.tailwind{
    @import "tailwindcss/base";

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";
}

但是 PostCSS 导入器不喜欢这样，因为它在顺风占位符被替换之前导入。因此，使其工作的唯一方法是将构建分为 2 个阶段，然后导入已编译的 css，如:

.tailwind{
    @import "tailwindcss.css";
}

它可以工作，但它打破了一些出现在开发工具中的 css 规则。
有没有更好的方法来确定顺风范围以阻止它干扰其他系统？

Answer 1

我发现你可以使用 postcss-nested为了这。安装插件，将它作为第一个插件添加到您的 PostCSS 配置文件中，这应该可以工作:

.tailwind {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    @tailwind screens;
}