如何确定 Tailwind Css 的范围

Question

当将 Tailwind CSS 包含在我不希望它全局应用且与自定义构建选项一起工作的系统中时，我找不到一种很好的方法来确定它的范围。

基本上我想这样做：

.tailwind{
    @import "tailwindcss/base";

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";
}

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

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

它有效，但它破坏了开发工具中显示的一些 css 规则。

有没有更好的方法来确定顺风的范围以阻止它干扰其他系统？

Answer 1

从文档中...

前缀选项允许您向所有 Tailwind 生成的实用程序类添加自定义前缀。当将 Tailwind 分层在可能存在命名冲突的现有 CSS 之上时，这非常有用。

例如，您可以通过设置 prefix 选项来添加 tw- 前缀，如下所示：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

Answer 2

您可以通过important在 tailwind 配置中设置您的父类或 id 来实现此目的。请参阅文档。

// tailwind.config.js
module.exports = {
  important: '.tailwind',
}

不幸的是，这似乎只影响组件和实用程序样式......基本样式将不受影响。

Answer 3

我认为这里棘手的部分实际上是关于 preflight/reset.css。您想要阻止外部样式进入您的范围，但也不希望您的顺风样式污染外部系统。

我当前的设置包括以下步骤：

1. 在tailwind.config.js中，我们禁用 prefight，定义 prefix ，并通过选项importanttw-添加额外的选择器。最后的更改将在输出中添加一个额外的 css 选择器，例如.#app#app .tw-mb-4

module.exports = {
  important: '#app',
  prefix: "tw-",
  corePlugins: {
    preflight: false,
  },

2. 查找并复制 node_modules 文件夹中的内容base.css，然后将其粘贴到带有父选择器的 scss 文件中#app。您可以使用任何在线 SCSS 编译器对其进行编译。这将帮助您仅在您的范围内重置样式。

#app {
  /*content from base.css*/
}

3. 复制 #2 中编译的样式并将其粘贴到tailwind css 文件的开头。

4. 构建 html，以便将内容包装在 id 为 的 div 中#app。

5. Tailwind 的important选项似乎没有添加选择器@layer component，因此您必须将其包含在组件样式中。

#app {
  /*content from base.css*/
}

Answer 4

按照要求在这里留下我的答案：

我按照兰尼的建议使用了前缀

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

然后制作我的顺风 css 文件，如下所示：

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";

然后我只是手动将我想要的任何基本样式手动复制到我的主 css 文件中，并手动更改任何冲突的内容。

Answer 5

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

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