如何确定 Tailwind Css 的范围

Question

当我不希望它全局应用的系统中包含顺风 CSS 时，我找不到一个很好的方法来确定它的范围，该系统与自定义构建选项一起使用。

基本上我想这样做：

.tailwind{
    @import "tailwindcss/base";

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";
}

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

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

它可以工作，但它违反了一些出现在开发工具中的 css 规则。

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

Answer 1

根据docs：

如果您想完全禁用 Preflight — 可能是因为您要将 Tailwind 集成到现有项目中，或者因为您想提供自己的基本样式 — 您只需在 corePlugins 中将 preflight 设置为 false tailwind.config.js 文件的一部分。

这似乎适用于管理员中的 Wordpress，但它确实删除了规范化，例如光标：按钮悬停上的指针。

Answer 2

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

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

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

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

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

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

1. 复制从 #2 编译的样式并粘贴到您的 tailwind css 文件的开头。

2. 构建 html，使您的内容包含在 id 为 #app 的 div 中。

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

@layer components {
    #app .page-h1 {
        @apply tw-mt-0 tw-mb-2 tw-text-center tw-leading-8 tw-text-4xl md:tw-text-5xl;
    }
}

Answer 3

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

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

Answer 4

根据要求在此处留下我的答案：

我使用了 Lanny 建议的前缀

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

然后像这样制作我的顺风 css 文件：

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";

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

Answer 5

您将通过在 tailwind 配置中将 important 设置为您的父类或 id 来实现此目的。见docs。

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

不幸的是，这似乎只会影响 components 和 utilities 样式... base 样式将不受影响。

Answer 6

From the docs...

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

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

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