如何确定 Tailwind Css 的范围

Question

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

基本上我想这样做：

.tailwind{
    @import "tailwindcss/base";

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";
}

但是 PostCSS 进口商不喜欢这个，因为它在顺风占位符被替换之前进口。所以让它工作的唯一方法是将构建分为 2 个阶段，然后导入编译的 css，如：

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

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

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

Answer 1

From the docs...

The prefix option allows you to add a custom prefix to all of Tailwind's generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.

For example, you could add a tw- prefix by setting the prefix option like so:

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

Answer 2

您可以通过在 tailwind 配置中将 important 设置为您的父级 class 或 ID 来实现此目的。参见 docs。

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

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

Answer 3

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

我使用了 Lanny 建议的前缀

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

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

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";

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

Answer 4

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

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

Answer 5

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

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

在tailwind.config.js中，我们禁用了prefight，定义了一个前缀tw-，并通过选项[=31]添加了一个额外的选择器#app =]重要。最后的更改将向输出添加一个额外的 css 选择器，例如#app .tw-mb-4.

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

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

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

从 #2 复制编译的样式并粘贴到 tailwind css 文件的 beginning。
构造 html 以便您的内容包含在 ID 为 #app 的 div 中。
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 6

根据 docs:

If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight to false in the corePlugins section of your tailwind.config.js file.

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

如何确定 Tailwind Css 的范围

How to scope Tailwind Css

tailwind-css