将顺风范围扩展到某个类别/ID

Question

我正在研究一种可能性来确定结果顺风CSS的范围。 该项目使用

react-app-rewired

。

我已经使用

tailwindcss-scoped-preflight

将预检样式纳入我的应用程序，但计算的类未纳入范围。

前缀显然也不起作用。使用类或 ID 前缀（例如

prefix: "#root ",

）确实不会发出任何顺风类。

使用scss也不起作用。框架只是发出这样的 css 代码：

#root {
  .m-0 {
    margin: 0px;
  }
  ...
}

但是

Can I use

表示只有 80.68% 完全支持 css 嵌套.. https://caniuse.com/css-nesting

目标不是创建这样的类：

.m-0 {
  margin: 0px;
}
.m-2 {
  margin-bottom: 0.5rem;
}
...

创建如下：

#root .m-0 {
  margin: 0px;
}
#root .m-2 {
  margin-bottom: 0.5rem;
}
...

我能做什么有什么想法吗？ 谢谢大家。

Answer 1

您可以考虑使用 important

 配置的 

选择器策略:

[…] 你可以将 important 设置为像 #app 这样的 ID 选择器：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  important: '#app',
}

此配置将为您的所有实用程序添加给定选择器的前缀，从而有效地提高它们的特异性，而无需实际使它们

!important

。

这意味着实用程序分组的Tailwind类将具有此范围“前缀”：

#app .m-0 {
  margin: 0px;
}
#app .m-2 {
  margin-bottom: 0.5rem;
}

tailwind.config = {
  important: '#root',
};

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="root">
  <div class="h-10 w-10 bg-red-200"></div>
</div>

<div class="h-10 w-10 bg-red-200"></div>

请注意，base和component规则可能not具有此范围前缀，因此您很可能需要继续使用您提到的

tailwindcss-scoped-preflight

包。